@ukic/canary-web-components 3.0.0-canary.19 → 3.0.0-canary.20

package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import readme from "./readme.md";
-import { DateFormats, Default, Disabled, DisableFuture, DisablePast, HideButtons, HideOutsideMonth, IcChangeDate, IcChangeDateEmitDatePartChanges, JSDates, MaxMin, MaxWidth, OpenAt, Sizes, Value, WeekStart, WorkingWeek, } from "./story-data";
+import { CustomHelperText, DateFormats, Default, Disabled, DisableFuture, DisablePast, HideButtons, HideOutsideMonth, IcChangeDate, IcChangeDateEmitDatePartChanges, JSDates, MaxMin, MaxWidth, OpenAt, Sizes, Value, WeekStart, WorkingWeek, } from "./story-data";
 export default {
     title: "Web Components/Date Picker",
     component: "ic-date-picker",
@@ -43,6 +43,14 @@ export const MaxWidthExample = {
     name: "Max width",
     height: "790px",
 };
+/**
+ * Use the helper text to add additional detail for the date input. Display custom content using the `helper-text` slot.
+ */
+export const CustomHelperTextExample = {
+    render: () => CustomHelperText(),
+    name: "Custom helper text",
+    height: "790px",
+};
 /**
  * Disable the date picker and prevent user interaction by using the `disabled` prop.
  */

package/dist/collection/components/ic-date-picker/ic-date-picker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/ic-date-picker/ic-date-picker.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport readme from \"./readme.md\";\nimport {\n  DateFormats,\n  Default,\n  Disabled,\n  DisableFuture,\n  DisablePast,\n  HideButtons,\n  HideOutsideMonth,\n  IcChangeDate,\n  IcChangeDateEmitDatePartChanges,\n  JSDates,\n  MaxMin,\n  MaxWidth,\n  OpenAt,\n  Sizes,\n  Value,\n  WeekStart,\n  WorkingWeek,\n} from \"./story-data\";\n\nexport default {\n  title: \"Web Components/Date Picker\",\n  component: \"ic-date-picker\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use a date picker to select a single date where visualising that date could be useful.\n *\n * There is one required prop for a date picker:\n * - label: `string`\n *\n * Click the 'Component API' tab to view all the available props and events for date pickers.\n *\n * To use the date picker component, import `@ukic/canary-web-components` into your application.\n *\n * The default date picker uses the date format of `DD/MM/YYYY`.\n */\nexport const DefaultExample = {\n  render: () => Default(),\n  name: \"Default\",\n  height: \"540px\",\n};\n\n/**\n * Set the size of the date picker by using the `size` prop. This prop takes the values `small`, `medium` (default) or `large`. Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\n */\nexport const SizesExample = {\n  render: () => Sizes(),\n  name: \"Sizes\",\n  height: \"790px\",\n};\n\n/**\n * Set the size of the input field by using the `--input-width` CSS custom property. The picker will grow, but not exceed its maximum supported width.\n */\nexport const MaxWidthExample = {\n  render: () => MaxWidth(),\n  name: \"Max width\",\n  height: \"790px\",\n};\n\n/**\n * Disable the date picker and prevent user interaction by using the `disabled` prop.\n */\nexport const DisabledExample = {\n  render: () => Disabled(),\n  name: \"Disabled\",\n  height: \"100px\",\n};\n\n/**\n * The `date-format` prop determines how dates are displayed. The supported formats are `DD/MM/YYYY`, `MM/DD/YYYY` or `YYYY/MM/DD`.\n */\nexport const DateFormatsExample = {\n  render: () => DateFormats(),\n  name: \"Date formats\",\n  height: \"750px\",\n};\n\n/**\n * The `value` prop sets the date in the input field. The value can be in any format supported by the `date-format` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n */\nexport const ValueExample = {\n  render: () => Value(),\n  name: \"Value\",\n  height: \"540px\",\n};\n\n/**\n * If no `value` is set, the `open-at-date` prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.\n *\n * The supported formats are the same as for the `value` prop.\n */\nexport const OpenAtDate = {\n  render: () => OpenAt(),\n  name: \"Open at date\",\n  height: \"540px\",\n};\n\n/**\n * The first day of the week can be changed by setting the `start-of-week` prop. This is a numeric value where 0 = Sunday, 1 = Monday, etc up to 6 = Saturday.\n */\nexport const StartOfWeek = {\n  render: () => WeekStart(),\n  name: \"Start of week\",\n  height: \"540px\",\n};\n\n/**\n * Specific days of the week can be disabled from selection by setting the `disable-days` prop. The value can be set as an array of numeric values where where 0 = Sunday, 1 = Monday, etc up to 6 = Saturday.\n */\nexport const DisableDaysOfWeek = {\n  render: () => WorkingWeek(),\n  name: \"Disable days of week\",\n  height: \"540px\",\n};\n\n/**\n * The `max` and `min` props can be used to limit the range of dates available for selection. Values can be in any format supported by the `date-format` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n */\nexport const MinMax = {\n  render: () => MaxMin(),\n  name: \"Min and max\",\n  height: \"540px\",\n};\n\n/**\n * Dates before today can be disabled with the `disable-past` prop.\n */\nexport const DisablePastExample = {\n  render: () => DisablePast(),\n  name: \"Disable dates in past\",\n  height: \"540px\",\n};\n\n/**\n * Dates after today can be disabled with the `disable-future` prop.\n */\nexport const DisableFutureExample = {\n  render: () => DisableFuture(),\n  name: \"Disable dates in future\",\n  height: \"540px\",\n};\n\n/**\n * Days outside of the current month in view can be hidden by setting the `show-days-outside-month` prop to `false`.\n */\nexport const DaysOutsideMonthHidden = {\n  render: () => HideOutsideMonth(),\n  name: \"Days outside month hidden\",\n  height: \"540px\",\n};\n\n/**\n * The \"Go to today\" and \"Clear\" buttons can be hidden from the calendar view by setting the `show-picker-today-button` and `show-picker-clear-button` props to `false`.\n */\nexport const ButtonsHidden = {\n  render: () => HideButtons(),\n  name: \"Today & clear buttons hidden\",\n  height: \"480px\",\n};\n\n/**\n * Any prop that accepts a date value can be set to a Javascript Date object. The following example sets the `value`, `max` and `min` props.\n */\nexport const JavascriptDates = {\n  render: () => JSDates(),\n  name: \"JavaScript dates\",\n  height: \"500px\",\n};\n\n/**\n * The `IcChange` event is emitted by the date picker when the selected date changes.\n */\nexport const IcChangeEvent = {\n  render: () => IcChangeDate(),\n  name: \"IcChange event\",\n  height: \"540px\",\n};\n\n/**\n * The `IcChange` event is emitted by the date picker every time an input field is changed.\n */\nexport const IcChangeEventEmitDatePartChange = {\n  render: () => IcChangeDateEmitDatePartChanges(),\n  name: \"IcChange event with emitDatePartChange\",\n  height: \"540px\",\n};\n"]}
+{"version":3,"file":"ic-date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/ic-date-picker/ic-date-picker.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport readme from \"./readme.md\";\nimport {\n  CustomHelperText,\n  DateFormats,\n  Default,\n  Disabled,\n  DisableFuture,\n  DisablePast,\n  HideButtons,\n  HideOutsideMonth,\n  IcChangeDate,\n  IcChangeDateEmitDatePartChanges,\n  JSDates,\n  MaxMin,\n  MaxWidth,\n  OpenAt,\n  Sizes,\n  Value,\n  WeekStart,\n  WorkingWeek,\n} from \"./story-data\";\n\nexport default {\n  title: \"Web Components/Date Picker\",\n  component: \"ic-date-picker\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use a date picker to select a single date where visualising that date could be useful.\n *\n * There is one required prop for a date picker:\n * - label: `string`\n *\n * Click the 'Component API' tab to view all the available props and events for date pickers.\n *\n * To use the date picker component, import `@ukic/canary-web-components` into your application.\n *\n * The default date picker uses the date format of `DD/MM/YYYY`.\n */\nexport const DefaultExample = {\n  render: () => Default(),\n  name: \"Default\",\n  height: \"540px\",\n};\n\n/**\n * Set the size of the date picker by using the `size` prop. This prop takes the values `small`, `medium` (default) or `large`. Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\n */\nexport const SizesExample = {\n  render: () => Sizes(),\n  name: \"Sizes\",\n  height: \"790px\",\n};\n\n/**\n * Set the size of the input field by using the `--input-width` CSS custom property. The picker will grow, but not exceed its maximum supported width.\n */\nexport const MaxWidthExample = {\n  render: () => MaxWidth(),\n  name: \"Max width\",\n  height: \"790px\",\n};\n\n/**\n * Use the helper text to add additional detail for the date input. Display custom content using the `helper-text` slot.\n */\nexport const CustomHelperTextExample = {\n  render: () => CustomHelperText(),\n  name: \"Custom helper text\",\n  height: \"790px\",\n};\n\n/**\n * Disable the date picker and prevent user interaction by using the `disabled` prop.\n */\nexport const DisabledExample = {\n  render: () => Disabled(),\n  name: \"Disabled\",\n  height: \"100px\",\n};\n\n/**\n * The `date-format` prop determines how dates are displayed. The supported formats are `DD/MM/YYYY`, `MM/DD/YYYY` or `YYYY/MM/DD`.\n */\nexport const DateFormatsExample = {\n  render: () => DateFormats(),\n  name: \"Date formats\",\n  height: \"750px\",\n};\n\n/**\n * The `value` prop sets the date in the input field. The value can be in any format supported by the `date-format` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n */\nexport const ValueExample = {\n  render: () => Value(),\n  name: \"Value\",\n  height: \"540px\",\n};\n\n/**\n * If no `value` is set, the `open-at-date` prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.\n *\n * The supported formats are the same as for the `value` prop.\n */\nexport const OpenAtDate = {\n  render: () => OpenAt(),\n  name: \"Open at date\",\n  height: \"540px\",\n};\n\n/**\n * The first day of the week can be changed by setting the `start-of-week` prop. This is a numeric value where 0 = Sunday, 1 = Monday, etc up to 6 = Saturday.\n */\nexport const StartOfWeek = {\n  render: () => WeekStart(),\n  name: \"Start of week\",\n  height: \"540px\",\n};\n\n/**\n * Specific days of the week can be disabled from selection by setting the `disable-days` prop. The value can be set as an array of numeric values where where 0 = Sunday, 1 = Monday, etc up to 6 = Saturday.\n */\nexport const DisableDaysOfWeek = {\n  render: () => WorkingWeek(),\n  name: \"Disable days of week\",\n  height: \"540px\",\n};\n\n/**\n * The `max` and `min` props can be used to limit the range of dates available for selection. Values can be in any format supported by the `date-format` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n */\nexport const MinMax = {\n  render: () => MaxMin(),\n  name: \"Min and max\",\n  height: \"540px\",\n};\n\n/**\n * Dates before today can be disabled with the `disable-past` prop.\n */\nexport const DisablePastExample = {\n  render: () => DisablePast(),\n  name: \"Disable dates in past\",\n  height: \"540px\",\n};\n\n/**\n * Dates after today can be disabled with the `disable-future` prop.\n */\nexport const DisableFutureExample = {\n  render: () => DisableFuture(),\n  name: \"Disable dates in future\",\n  height: \"540px\",\n};\n\n/**\n * Days outside of the current month in view can be hidden by setting the `show-days-outside-month` prop to `false`.\n */\nexport const DaysOutsideMonthHidden = {\n  render: () => HideOutsideMonth(),\n  name: \"Days outside month hidden\",\n  height: \"540px\",\n};\n\n/**\n * The \"Go to today\" and \"Clear\" buttons can be hidden from the calendar view by setting the `show-picker-today-button` and `show-picker-clear-button` props to `false`.\n */\nexport const ButtonsHidden = {\n  render: () => HideButtons(),\n  name: \"Today & clear buttons hidden\",\n  height: \"480px\",\n};\n\n/**\n * Any prop that accepts a date value can be set to a Javascript Date object. The following example sets the `value`, `max` and `min` props.\n */\nexport const JavascriptDates = {\n  render: () => JSDates(),\n  name: \"JavaScript dates\",\n  height: \"500px\",\n};\n\n/**\n * The `IcChange` event is emitted by the date picker when the selected date changes.\n */\nexport const IcChangeEvent = {\n  render: () => IcChangeDate(),\n  name: \"IcChange event\",\n  height: \"540px\",\n};\n\n/**\n * The `IcChange` event is emitted by the date picker every time an input field is changed.\n */\nexport const IcChangeEventEmitDatePartChange = {\n  render: () => IcChangeDateEmitDatePartChanges(),\n  name: \"IcChange event with emitDatePartChange\",\n  height: \"540px\",\n};\n"]}

package/dist/collection/components/ic-date-picker/story-data.js

@@ -37,6 +37,31 @@ export const MaxWidth = () => {
     container.style.gap = "16px";
     return container;
 };
+export const WithHelperTextProp = () => {
+    const datePicker = createDatePickerElement();
+    datePicker.helperText = "We will have your order ready for you on this date";
+    return datePicker;
+};
+export const WithHelperTextSlot = () => {
+    const datePicker = createDatePickerElement();
+    datePicker.innerHTML = `
+    <ic-typography variant="caption" slot="helper-text">
+      <span>
+        For special requests, <ic-link href="#" >contact us</ic-link> before choosing a date
+      </span>
+    </ic-typography>
+  `;
+    return datePicker;
+};
+export const CustomHelperText = () => {
+    const container = document.createElement("div");
+    container.appendChild(WithHelperTextProp());
+    container.appendChild(WithHelperTextSlot());
+    container.style.display = "flex";
+    container.style.flexDirection = "column";
+    container.style.gap = "16px";
+    return container;
+};
 export const MonthFirst = () => {
     const datePicker = createDatePickerElement();
     datePicker.dateFormat = "MM/DD/YYYY";

package/dist/collection/components/ic-date-picker/story-data.js.map

@@ -1 +1 @@
-{"version":3,"file":"story-data.js","sourceRoot":"","sources":["../../../src/components/ic-date-picker/story-data.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,MAAM,CAAC,MAAM,iBAAiB,GAAG,6CAA6C,CAAC;AAE/E,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC5D,UAAU,CAAC,KAAK,GAAG,iBAAiB,CAAC;IACrC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAA4B,EAAE,CAAC,uBAAuB,EAAE,CAAC;AAEhF,MAAM,CAAC,MAAM,KAAK,GAAG,GAA4B,EAAE;IACjD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,IAAI,GAAG,OAAO,CAAC;IAC1B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAA4B,EAAE;IACjD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,IAAI,GAAG,OAAO,CAAC;IAC1B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAgB,EAAE;IACrC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;IAC/B,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IACjC,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;IAE/B,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;IACzC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC;IAE7B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAgB,EAAE;IACxC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,SAAS,GAAG,sBAAsB,CAAC;IAE7C,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;IAC/B,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IACjC,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;IAE/B,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;IACzC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC;IAE7B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAA4B,EAAE;IACtD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,UAAU,GAAG,YAAY,CAAC;IACrC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAA4B,EAAE;IACrD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,UAAU,GAAG,YAAY,CAAC;IACrC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAgB,EAAE;IAC3C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAEhD,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC;IACjC,SAAS,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC,CAAC;IACpC,SAAS,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC;IAEnC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;IACzC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC;IAE7B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAA4B,EAAE;IACjD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,KAAK,GAAG,YAAY,CAAC;IAChC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAA4B,EAAE;IAClD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,UAAU;QACnB,wEAAwE,CAAC;IAC3E,UAAU,CAAC,UAAU,GAAG,YAAY,CAAC;IACrC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAA4B,EAAE;IACrD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC;IAC3B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAA4B,EAAE;IACvD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAChC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAA4B,EAAE;IAClD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,UAAU,GAAG,gDAAgD,CAAC;IACzE,UAAU,CAAC,GAAG,GAAG,YAAY,CAAC;IAC9B,UAAU,CAAC,GAAG,GAAG,YAAY,CAAC;IAC9B,UAAU,CAAC,qBAAqB,GAAG,KAAK,CAAC;IACzC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,GAA4B,EAAE;IACpD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,QAAQ,GAAG,IAAI,CAAC;IAC3B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAA4B,EAAE;IACvD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC;IAC9B,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,GAA4B,EAAE;IACzD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,aAAa,GAAG,IAAI,CAAC;IAChC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAA4B,EAAE;IAC5D,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,oBAAoB,GAAG,KAAK,CAAC;IACxC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAA4B,EAAE;IACvD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,qBAAqB,GAAG,KAAK,CAAC;IACzC,UAAU,CAAC,qBAAqB,GAAG,KAAK,CAAC;IACzC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAA4B,EAAE;IACnD,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,UAAU,GAAG,gDAAgD,CAAC;IACzE,UAAU,CAAC,qBAAqB,GAAG,KAAK,CAAC;IACzC,UAAU,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACtC,UAAU,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,UAAU,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACzC,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAAe,EAAQ,EAAE;IACnD,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC;IACrD,IAAI,IAAI,GAAG,iBAAiB,CAAC;IAC7B,IAAI,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;QACpB,IAAI,IAAI,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC;IAC1B,CAAC;IACD,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC;IACpB,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;AACtC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAgB,EAAE;IAC5C,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,gBAAgB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC;IACrC,OAAO,CAAC,EAAE,GAAG,eAAe,CAAC;IAE7B,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE/B,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;IACzC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC;IAE7B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,+BAA+B,GAAG,GAAgB,EAAE;IAC/D,MAAM,UAAU,GAAG,uBAAuB,EAAE,CAAC;IAC7C,UAAU,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACrC,UAAU,CAAC,gBAAgB,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC;IACrC,OAAO,CAAC,EAAE,GAAG,eAAe,CAAC;IAE7B,SAAS,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAClC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE/B,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;IACzC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,CAAC;IAE7B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC","sourcesContent":["/* eslint-disable */\nexport const DATE_PICKER_LABEL = \"When would you like to collect your coffee?\";\n\nexport const createDatePickerElement = () => {\n  const datePicker = document.createElement(\"ic-date-picker\");\n  datePicker.label = DATE_PICKER_LABEL;\n  return datePicker;\n};\n\nexport const Default = (): HTMLIcDatePickerElement => createDatePickerElement();\n\nexport const Small = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.size = \"small\";\n  return datePicker;\n};\n\nexport const Large = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.size = \"large\";\n  return datePicker;\n};\n\nexport const Sizes = (): HTMLElement => {\n  const container = document.createElement(\"div\");\n\n  container.appendChild(Small());\n  container.appendChild(Default());\n  container.appendChild(Large());\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"16px\";\n\n  return container;\n};\n\nexport const MaxWidth = (): HTMLElement => {\n  const container = document.createElement(\"div\");\n  container.className = \"dp-max-width-example\";\n\n  container.appendChild(Small());\n  container.appendChild(Default());\n  container.appendChild(Large());\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"16px\";\n\n  return container;\n};\n\nexport const MonthFirst = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.dateFormat = \"MM/DD/YYYY\";\n  return datePicker;\n};\n\nexport const YearFirst = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.dateFormat = \"YYYY/MM/DD\";\n  return datePicker;\n};\n\nexport const DateFormats = (): HTMLElement => {\n  const container = document.createElement(\"div\");\n\n  container.appendChild(Default());\n  container.appendChild(MonthFirst());\n  container.appendChild(YearFirst());\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"16px\";\n\n  return container;\n};\n\nexport const Value = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.value = \"01/01/2024\";\n  return datePicker;\n};\n\nexport const OpenAt = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.helperText =\n    \"The calendar will open showing 25th December 2024, if no date selected\";\n  datePicker.openAtDate = \"2024-12-25\";\n  return datePicker;\n};\n\nexport const WeekStart = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.startOfWeek = 0;\n  return datePicker;\n};\n\nexport const WorkingWeek = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.disableDays = [0, 6];\n  return datePicker;\n};\n\nexport const MaxMin = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.helperText = \"Choose a date between the 1st and 31st of July\";\n  datePicker.min = \"2024-07-01\";\n  datePicker.max = \"2024-07-31\";\n  datePicker.showPickerTodayButton = false;\n  return datePicker;\n};\n\nexport const Disabled = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.disabled = true;\n  return datePicker;\n};\n\nexport const DisablePast = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.disablePast = true;\n  return datePicker;\n};\n\nexport const DisableFuture = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.disableFuture = true;\n  return datePicker;\n};\n\nexport const HideOutsideMonth = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.showDaysOutsideMonth = false;\n  return datePicker;\n};\n\nexport const HideButtons = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.showPickerClearButton = false;\n  datePicker.showPickerTodayButton = false;\n  return datePicker;\n};\n\nexport const JSDates = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.helperText = \"Choose a date between the 1st and 31st of July\";\n  datePicker.showPickerTodayButton = false;\n  datePicker.min = new Date(2024, 6, 1);\n  datePicker.max = new Date(2024, 6, 31);\n  datePicker.value = new Date(2024, 6, 15);\n  return datePicker;\n};\n\nconst updateSelectedDate = (ev: CustomEvent): void => {\n  const el = document.querySelector(\"#selected-date\")!;\n  let text = \"Selected date: \";\n  if (ev.detail.value) {\n    text += ev.detail.value;\n  }\n  el.innerHTML = text;\n  console.log(\"ic-change\", ev.detail);\n};\n\nexport const IcChangeDate = (): HTMLElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.addEventListener(\"icChange\", updateSelectedDate);\n  const container = document.createElement(\"div\");\n\n  const selDate = document.createElement(\"span\");\n  selDate.innerText = \"Selected date:\";\n  selDate.id = \"selected-date\";\n\n  container.appendChild(datePicker);\n  container.appendChild(selDate);\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"50px\";\n\n  return container;\n};\n\nexport const IcChangeDateEmitDatePartChanges = (): HTMLElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.emitDatePartChange = true;\n  datePicker.addEventListener(\"icChange\", updateSelectedDate);\n  const container = document.createElement(\"div\");\n\n  const selDate = document.createElement(\"span\");\n  selDate.innerText = \"Selected date:\";\n  selDate.id = \"selected-date\";\n\n  container.appendChild(datePicker);\n  container.appendChild(selDate);\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"50px\";\n\n  return container;\n};\n"]}
+{"version":3,"file":"story-data.js","sourceRoot":"","sources":["../../../src/components/ic-date-picker/story-data.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable */\nexport const DATE_PICKER_LABEL = \"When would you like to collect your coffee?\";\n\nexport const createDatePickerElement = () => {\n  const datePicker = document.createElement(\"ic-date-picker\");\n  datePicker.label = DATE_PICKER_LABEL;\n  return datePicker;\n};\n\nexport const Default = (): HTMLIcDatePickerElement => createDatePickerElement();\n\nexport const Small = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.size = \"small\";\n  return datePicker;\n};\n\nexport const Large = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.size = \"large\";\n  return datePicker;\n};\n\nexport const Sizes = (): HTMLElement => {\n  const container = document.createElement(\"div\");\n\n  container.appendChild(Small());\n  container.appendChild(Default());\n  container.appendChild(Large());\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"16px\";\n\n  return container;\n};\n\nexport const MaxWidth = (): HTMLElement => {\n  const container = document.createElement(\"div\");\n  container.className = \"dp-max-width-example\";\n\n  container.appendChild(Small());\n  container.appendChild(Default());\n  container.appendChild(Large());\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"16px\";\n\n  return container;\n};\n\nexport const WithHelperTextProp = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.helperText = \"We will have your order ready for you on this date\";\n  return datePicker;\n};\n\nexport const WithHelperTextSlot = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.innerHTML = `\n    <ic-typography variant=\"caption\" slot=\"helper-text\">\n      <span>\n        For special requests, <ic-link href=\"#\" >contact us</ic-link> before choosing a date\n      </span>\n    </ic-typography>\n  `;\n  return datePicker;\n};\n\nexport const CustomHelperText = (): HTMLElement => {\n  const container = document.createElement(\"div\");\n\n  container.appendChild(WithHelperTextProp());\n  container.appendChild(WithHelperTextSlot());\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"16px\";\n\n  return container;\n};\n\nexport const MonthFirst = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.dateFormat = \"MM/DD/YYYY\";\n  return datePicker;\n};\n\nexport const YearFirst = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.dateFormat = \"YYYY/MM/DD\";\n  return datePicker;\n};\n\nexport const DateFormats = (): HTMLElement => {\n  const container = document.createElement(\"div\");\n\n  container.appendChild(Default());\n  container.appendChild(MonthFirst());\n  container.appendChild(YearFirst());\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"16px\";\n\n  return container;\n};\n\nexport const Value = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.value = \"01/01/2024\";\n  return datePicker;\n};\n\nexport const OpenAt = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.helperText =\n    \"The calendar will open showing 25th December 2024, if no date selected\";\n  datePicker.openAtDate = \"2024-12-25\";\n  return datePicker;\n};\n\nexport const WeekStart = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.startOfWeek = 0;\n  return datePicker;\n};\n\nexport const WorkingWeek = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.disableDays = [0, 6];\n  return datePicker;\n};\n\nexport const MaxMin = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.helperText = \"Choose a date between the 1st and 31st of July\";\n  datePicker.min = \"2024-07-01\";\n  datePicker.max = \"2024-07-31\";\n  datePicker.showPickerTodayButton = false;\n  return datePicker;\n};\n\nexport const Disabled = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.disabled = true;\n  return datePicker;\n};\n\nexport const DisablePast = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.disablePast = true;\n  return datePicker;\n};\n\nexport const DisableFuture = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.disableFuture = true;\n  return datePicker;\n};\n\nexport const HideOutsideMonth = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.showDaysOutsideMonth = false;\n  return datePicker;\n};\n\nexport const HideButtons = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.showPickerClearButton = false;\n  datePicker.showPickerTodayButton = false;\n  return datePicker;\n};\n\nexport const JSDates = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.helperText = \"Choose a date between the 1st and 31st of July\";\n  datePicker.showPickerTodayButton = false;\n  datePicker.min = new Date(2024, 6, 1);\n  datePicker.max = new Date(2024, 6, 31);\n  datePicker.value = new Date(2024, 6, 15);\n  return datePicker;\n};\n\nconst updateSelectedDate = (ev: CustomEvent): void => {\n  const el = document.querySelector(\"#selected-date\")!;\n  let text = \"Selected date: \";\n  if (ev.detail.value) {\n    text += ev.detail.value;\n  }\n  el.innerHTML = text;\n  console.log(\"ic-change\", ev.detail);\n};\n\nexport const IcChangeDate = (): HTMLElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.addEventListener(\"icChange\", updateSelectedDate);\n  const container = document.createElement(\"div\");\n\n  const selDate = document.createElement(\"span\");\n  selDate.innerText = \"Selected date:\";\n  selDate.id = \"selected-date\";\n\n  container.appendChild(datePicker);\n  container.appendChild(selDate);\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"50px\";\n\n  return container;\n};\n\nexport const IcChangeDateEmitDatePartChanges = (): HTMLElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.emitDatePartChange = true;\n  datePicker.addEventListener(\"icChange\", updateSelectedDate);\n  const container = document.createElement(\"div\");\n\n  const selDate = document.createElement(\"span\");\n  selDate.innerText = \"Selected date:\";\n  selDate.id = \"selected-date\";\n\n  container.appendChild(datePicker);\n  container.appendChild(selDate);\n\n  container.style.display = \"flex\";\n  container.style.flexDirection = \"column\";\n  container.style.gap = \"50px\";\n\n  return container;\n};\n"]}

package/dist/collection/components/ic-tree-item/ic-tree-item.css

@@ -7,8 +7,8 @@
 :host .tree-item-content {
   display: flex;
   align-items: center;
-  min-height: calc(var(--ic-space-xl) + var(--ic-space-xs));
-  padding: 0 var(--ic-space-xs);
+  min-height: var(--ic-space-xl);
+  padding: var(--ic-space-xxs) var(--ic-space-xs);
   text-decoration: none;
   color: var(--ic-tree-view-text);
 
@@ -18,11 +18,11 @@
 ::slotted([slot="router-item"]) {
   display: flex;
   align-items: center;
-  min-height: calc(var(--ic-space-xl) + var(--ic-space-xs));
+  min-height: var(--ic-space-xl);
   text-decoration: none;
   font-family: var(--ic-font-body-family);
   color: var(--ic-tree-view-text);
-  padding: 0 var(--ic-space-xs) !important;
+  padding: var(--ic-space-xxs) var(--ic-space-xs) !important;
 }
 
 :host(.ic-tree-item-truncate) .tree-item-content,
@@ -36,21 +36,10 @@
 
 :host .tree-item-content:focus,
 ::slotted([slot="router-item"]:focus) {
-  box-shadow: var(--ic-border-focus);
-  border-radius: var(--ic-border-radius);
-  transition: var(--ic-transition-duration-fast);
-  outline: none;
-}
-
-:host(.ic-tree-item-focus-inset) .tree-item-content:focus,
-:host(.ic-tree-item-focus-inset) ::slotted([slot="router-item"]:focus) {
   box-shadow: var(--ic-border-focus-inset);
   border-radius: var(--ic-border-radius-inset);
-}
-
-:host(.ic-tree-item-focus-inset) .tree-item-content,
-:host(.ic-tree-item-focus-inset) ::slotted([slot="router-item"]) {
-  padding: 0 var(--ic-space-sm);
+  transition: var(--ic-transition-duration-fast);
+  outline: none;
 }
 
 :host .tree-item-content:hover,
@@ -71,24 +60,24 @@
 
 :host(.ic-tree-item-small) .tree-item-content,
 :host(.ic-tree-item-small) ::slotted([slot="router-item"]) {
-  min-height: var(--ic-space-xl);
+  min-height: var(--ic-space-lg);
 }
 
 :host(.ic-tree-item-large) .tree-item-content,
 :host(.ic-tree-item-large) ::slotted([slot="router-item"]) {
-  min-height: var(--ic-space-xxl);
+  min-height: calc(var(--ic-space-xl) + var(--ic-space-xs));
 }
 
 :host(.ic-tree-item-truncate.ic-tree-item-small) .tree-item-content,
 :host(.ic-tree-item-truncate.ic-tree-item-small)
   ::slotted([slot="router-item"]) {
-  height: var(--ic-space-xl);
+  height: var(--ic-space-lg);
 }
 
 :host(.ic-tree-item-truncate.ic-tree-item-large) .tree-item-content,
 :host(.ic-tree-item-truncate.ic-tree-item-large)
   ::slotted([slot="router-item"]) {
-  height: var(--ic-space-xxl);
+  height: calc(var(--ic-space-xl) + var(--ic-space-xs));
 }
 
 :host(.ic-tree-item-disabled) {
@@ -109,6 +98,7 @@
 :host .arrow-dropdown {
   color: var(--ic-tree-view-dropdown-arrow);
   margin-right: var(--ic-space-xs);
+  margin-bottom: calc(var(--ic-space-xxs) * -1);
 }
 
 :host(.ic-tree-item-disabled) .arrow-dropdown {
@@ -122,6 +112,7 @@
 :host .tree-item-expanded {
   transform: rotate(180deg);
   margin-top: calc(-1 * var(--ic-space-xxs));
+  margin-bottom: 0;
 }
 
 :host .ic-tree-item-single {

package/dist/collection/components/ic-tree-item/ic-tree-item.js

@@ -9,7 +9,6 @@ let treeItemIds = 0;
  */
 export class TreeItem {
     constructor() {
-        this.treeItemId = `ic-tree-item-${treeItemIds++}`;
         this.treeItemTag = "IC-TREE-ITEM";
         this.hostMutationObserver = null;
         this.TOOLTIP = "ic-tooltip";
@@ -23,10 +22,6 @@ export class TreeItem {
          * If `true`, the tree item appears in the expanded state.
          */
         this.expanded = false;
-        /**
-         * @internal If `true`, the tree item will have an inset focus border.
-         */
-        this.focusInset = false;
         /**
          * @internal Determines if the parent tree item has been expanded.
          */
@@ -112,27 +107,30 @@ export class TreeItem {
             }
             const tooltipAlreadyExists = !!(typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.closest(this.TOOLTIP));
             const treeContent = ((_b = treeItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.TREE_ITEM_CONTENT_CLASS_SELECTOR)) || slottedContent;
-            if (contentHeight &&
-                (treeContent === null || treeContent === void 0 ? void 0 : treeContent.clientHeight) &&
-                contentHeight > treeContent.clientHeight &&
-                !tooltipAlreadyExists &&
-                typographyEl) {
-                const tooltipEl = document.createElement("ic-tooltip");
-                tooltipEl.setAttribute("target", this.el.id);
-                tooltipEl.setAttribute("label", typographyEl.textContent);
-                tooltipEl.setAttribute("placement", "right");
-                if (treeContent === slottedContent) {
-                    treeContent.addEventListener("focus", () => this.handleDisplayTooltip(true));
-                    treeContent.addEventListener("blur", () => this.handleDisplayTooltip(false));
-                    tooltipEl.setAttribute("style", "overflow:hidden;");
-                    typographyEl.setAttribute("style", "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;");
-                }
-                else {
-                    tooltipEl.classList.add("ic-tooltip-overflow");
-                    typographyEl.classList.add("ic-text-overflow");
+            if (treeContent) {
+                const computedHeight = parseFloat(getComputedStyle(treeContent).height);
+                if (contentHeight &&
+                    computedHeight &&
+                    contentHeight > computedHeight &&
+                    !tooltipAlreadyExists &&
+                    typographyEl) {
+                    const tooltipEl = document.createElement("ic-tooltip");
+                    tooltipEl.setAttribute("target", this.el.id);
+                    tooltipEl.setAttribute("label", typographyEl.textContent);
+                    tooltipEl.setAttribute("placement", "right");
+                    if (treeContent === slottedContent) {
+                        treeContent.addEventListener("focus", () => this.handleDisplayTooltip(true));
+                        treeContent.addEventListener("blur", () => this.handleDisplayTooltip(false));
+                        tooltipEl.setAttribute("style", "overflow:hidden;");
+                        typographyEl.setAttribute("style", "overflow:hidden;text-overflow:ellipsis;white-space:nowrap;");
+                    }
+                    else {
+                        tooltipEl.classList.add("ic-tooltip-overflow");
+                        typographyEl.classList.add("ic-text-overflow");
+                    }
+                    treeContent.appendChild(tooltipEl);
+                    tooltipEl.appendChild(typographyEl);
                 }
-                treeContent.appendChild(tooltipEl);
-                tooltipEl.appendChild(typographyEl);
             }
         };
         this.removeTreeItemTruncation = (treeItem) => {
@@ -160,7 +158,7 @@ export class TreeItem {
         removeDisabledFalse(this.disabled, this.el);
     }
     watchExpandedHandler() {
-        this.icTreeItemExpanded.emit({ isExpanded: this.expanded });
+        this.icTreeItemExpanded.emit({ isExpanded: this.expanded, id: this.el.id });
     }
     watchSelectedHandler() {
         if (this.selected) {
@@ -270,7 +268,8 @@ export class TreeItem {
         return !!this.routerSlot;
     }
     render() {
-        const { disabled, label, selected, size, expanded, focusInset, theme } = this;
+        var _a;
+        const { disabled, label, selected, size, expanded, theme } = this;
         const Component = this.href && !this.disabled ? "a" : "div";
         const attrs = Component == "a" && {
             href: this.href,
@@ -279,19 +278,18 @@ export class TreeItem {
             rel: this.rel,
             target: this.target,
         };
-        return (h(Host, { key: '1421c6963e01047532edb262823d1a43cdb51609', class: {
+        return (h(Host, { key: '14eade7c0b23b1c2c2918dda4f011953d6463ec6', class: {
                 "ic-tree-item-disabled": disabled,
                 "ic-tree-item-selected": !disabled && selected,
                 [`ic-tree-item-${size}`]: size !== "medium",
-                "ic-tree-item-focus-inset": focusInset,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tree-item-truncate": !!this.truncateTreeItem,
-            }, id: this.treeItemId }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(Component, Object.assign({ class: {
+            }, id: (_a = this.treeItemId) !== null && _a !== void 0 ? _a : `ic-tree-item-${treeItemIds++}` }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(Component, Object.assign({ class: {
                 "tree-item-content": true,
             }, tabIndex: disabled ? -1 : 0, onClick: this.handleTreeItemClicked, ref: (el) => (this.treeItemElement = el), "aria-disabled": disabled ? "true" : "false", "aria-live": "polite" }, attrs, { onFocus: () => this.handleDisplayTooltip(true), onBlur: () => this.handleDisplayTooltip(false) }), this.isParent && (h("span", { class: {
                 ["arrow-dropdown"]: true,
                 ["tree-item-expanded"]: expanded,
-            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), h("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? h("slot", { name: "label" }) : label))), expanded && (h("div", { key: '4090790d0b574a472c05c29198856a989342e078', "aria-hidden": `${!expanded}` }, h("slot", { key: 'ca48ba749e07761278710f0808c252929ce31497' })))));
+            }, "aria-hidden": "true", innerHTML: arrowDropdown })), isSlotUsed(this.el, "icon") && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), h("ic-typography", { class: "tree-item-label" }, isSlotUsed(this.el, "label") ? h("slot", { name: "label" }) : label))), expanded && (h("div", { key: '0a7704d93ccba8640265eacd9c81971d3717a233', "aria-hidden": `${!expanded}` }, h("slot", { key: '27eb9361c885e589eac4a3bd6cfd303efb60e1fb' })))));
     }
     static get is() { return "ic-tree-item"; }
     static get encapsulation() { return "shadow"; }
@@ -347,29 +345,6 @@ export class TreeItem {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "focusInset": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "If `true`, the tree item will have an inset focus border."
-                        }],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "focus-inset",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "hasParentExpanded": {
                 "type": "boolean",
                 "mutable": true,
@@ -608,6 +583,25 @@ export class TreeItem {
                 "attribute": "target",
                 "reflect": false
             },
+            "treeItemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the tree item id. Must be unique."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "tree-item-id",
+                "reflect": false
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -687,8 +681,8 @@ export class TreeItem {
                     "text": "Emitted when tree item is expanded."
                 },
                 "complexType": {
-                    "original": "{ isExpanded: boolean }",
-                    "resolved": "{ isExpanded: boolean; }",
+                    "original": "{\n    isExpanded: boolean;\n    id: string;\n  }",
+                    "resolved": "{ isExpanded: boolean; id: string; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/ic-tree-item/ic-tree-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tree-item.js","sourceRoot":"","sources":["../../../src/components/ic-tree-item/ic-tree-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  State,\n  Listen,\n  Method,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet treeItemIds = 0;\n\n/**\n * @slot label - Content is set as the tree item label.\n * @slot icon - Content is placed to the left of the label.\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n@Component({\n  tag: \"ic-tree-item\",\n  styleUrl: \"ic-tree-item.css\",\n  shadow: true,\n})\nexport class TreeItem {\n  private treeItemId = `ic-tree-item-${treeItemIds++}`;\n  private treeItemElement: HTMLElement | undefined;\n  private treeItemTag = \"IC-TREE-ITEM\";\n  private routerSlot: HTMLElement | null;\n  private hostMutationObserver: MutationObserver | null = null;\n  private TOOLTIP = \"ic-tooltip\";\n  private TREE_ITEM_LABEL_CLASS_SELECTOR = \".tree-item-label\";\n  private TREE_ITEM_CONTENT_CLASS_SELECTOR = \".tree-item-content\";\n\n  @Element() el: HTMLIcTreeItemElement;\n\n  @State() childTreeItems: HTMLIcTreeItemElement[];\n\n  /**\n   * If `true`, the tree item appears in the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the tree item appears in the expanded state.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.icTreeItemExpanded.emit({ isExpanded: this.expanded });\n  }\n  /**\n   * @internal If `true`, the tree item will have an inset focus border.\n   */\n  @Prop() focusInset: boolean = false;\n\n  /**\n   * @internal Determines if the parent tree item has been expanded.\n   */\n  @Prop({ mutable: true }) hasParentExpanded: boolean = false;\n\n  /**\n   * The URL that the tree item link points to. If set, the tree item will render as an \"a\" tag, otherwise it will render as a div.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * @internal If `true`, the tree item is a parent of other tree items.\n   */\n  @Prop({ mutable: true }) isParent: boolean = false;\n\n  /**\n   * The label of the tree item.\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * @internal Holds the previous truncation state before the screen switches to a small viewport, so it can be reset when screen size changes again.\n   */\n  @Prop() previousTruncateTreeItem?: boolean;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * If `true`, the tree item appears in the selected state.\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    if (this.selected) {\n      this.icTreeItemSelected.emit({ id: this.el.id });\n    }\n    this.updateAriaLabel();\n  }\n\n  /**\n   * @internal Determines the size of the tree item.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the tree item label will be truncated instead of text wrapping.\n   */\n  @Prop() truncateTreeItem?: boolean;\n\n  /**\n   * Emitted when tree item is selected.\n   */\n  @Event() icTreeItemSelected: EventEmitter<{ id: string }>;\n\n  /**\n   * Emitted when tree item is expanded.\n   */\n  @Event() icTreeItemExpanded: EventEmitter<{ isExpanded: boolean }>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.childTreeItems = Array.from((this.el as HTMLElement).children).filter(\n      (child) => child.tagName === this.treeItemTag\n    ) as HTMLIcTreeItemElement[];\n\n    if (this.childTreeItems.length > 0) {\n      this.isParent = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setTreeItemPadding();\n\n    this.updateAriaLabel();\n\n    !isSlotUsed(this.el, \"label\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Tree item\"\n      );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, \"icon\", this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n  componentDidRender(): void {\n    this.truncateTreeItem\n      ? this.truncateTreeItemLabel(this.el)\n      : this.removeTreeItemTruncation(this.el);\n    if (this.expanded) {\n      this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n        child.truncateTreeItem\n          ? this.truncateTreeItemLabel(child)\n          : this.removeTreeItemTruncation(child);\n      });\n    }\n  }\n\n  componentDidUpdate(): void {\n    if (this.hasParentExpanded) {\n      this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n        child.truncateTreeItem\n          ? this.truncateTreeItemLabel(child)\n          : this.removeTreeItemTruncation(child);\n      });\n      this.hasParentExpanded = false;\n    }\n  }\n\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      ev.stopImmediatePropagation();\n      this.handleTreeItemClicked();\n    }\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.hasRouterSlot()) {\n      this.routerSlot?.focus();\n    } else {\n      this.treeItemElement?.focus();\n    }\n  }\n\n  private handleTreeItemClicked = (): void => {\n    if (this.isParent) {\n      this.expanded = !this.expanded;\n      this.hasParentExpanded = true;\n    }\n\n    this.updateAriaLabel();\n    this.selected = true;\n    this.watchSelectedHandler();\n  };\n\n  /**\n   * @internal Updates the aria-label of the tree item.\n   */\n  @Method()\n  async updateAriaLabel(): Promise<void> {\n    let ariaLabel;\n\n    if (this.hasRouterSlot()) {\n      ariaLabel = this.routerSlot!.textContent;\n    } else if (isSlotUsed(this.el, \"label\")) {\n      ariaLabel = this.el.querySelector('[slot=\"label\"]')!.textContent;\n    } else {\n      ariaLabel = this.label;\n    }\n\n    if (this.isParent) {\n      ariaLabel = `${ariaLabel}, triggers submenu, ${\n        this.expanded ? \"expanded\" : \"collapsed\"\n      }`;\n    }\n\n    if (this.el.parentElement) {\n      const treeItems = Array.from(\n        (this.el.parentElement as HTMLElement).children\n      ).filter(\n        (child) => child.tagName === this.treeItemTag\n      ) as HTMLIcTreeItemElement[];\n\n      const index = treeItems.indexOf(this.el) + 1;\n      const parentChildren = treeItems.length;\n\n      ariaLabel = `${ariaLabel}, ${index} of ${parentChildren}`;\n    }\n\n    if (this.selected) {\n      ariaLabel = `${ariaLabel}, active`;\n    }\n\n    if (this.disabled) {\n      ariaLabel = `${ariaLabel}, dimmed`;\n    }\n\n    if (this.hasRouterSlot()) {\n      this.routerSlot!.ariaLabel = ariaLabel;\n    } else {\n      this.treeItemElement!.ariaLabel = ariaLabel;\n    }\n  }\n\n  private setTreeItemPadding = () => {\n    let level = 1;\n    let parentElement = this.el.parentElement;\n    const treeItemContent = this.el.shadowRoot?.querySelector(\n      this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n    ) as HTMLElement;\n\n    if (!parentElement) {\n      return;\n    }\n\n    const isSiblingOfParent = Array.from(parentElement.children).some(\n      (sibling) =>\n        sibling !== this.el &&\n        !sibling.querySelector('[slot=\"router-item\"]') &&\n        !sibling.querySelector('[slot=\"label\"]') &&\n        sibling.children.length > 0\n    );\n\n    if (\n      (isSiblingOfParent && !this.el.isParent) ||\n      (parentElement.tagName === this.treeItemTag && !this.el.isParent)\n    ) {\n      if (this.hasRouterSlot()) {\n        this.routerSlot!.classList.add(\"ic-tree-item-single\");\n      } else {\n        treeItemContent.classList.add(\"ic-tree-item-single\");\n      }\n    }\n\n    while (parentElement) {\n      if (parentElement.tagName === this.treeItemTag) {\n        level++;\n        treeItemContent.style.paddingLeft = !this.el.isParent\n          ? `calc(var(--ic-space-${isSiblingOfParent ? \"xl\" : \"xs\"}) + ${\n              level * (isSiblingOfParent ? 16 : 24)\n            }px)`\n          : `${level * 16}px`;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  };\n\n  private truncateTreeItemLabel = (treeItem: HTMLIcTreeItemElement) => {\n    let typographyEl =\n      treeItem.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n        this.TREE_ITEM_LABEL_CLASS_SELECTOR\n      );\n    const slottedContent = treeItem.querySelector(\"[slot='router-item']\");\n    let contentHeight = slottedContent?.scrollHeight;\n\n    if (!typographyEl && slottedContent) {\n      const newTypographyEl = document.createElement(\"ic-typography\");\n      newTypographyEl.innerHTML = slottedContent.textContent!;\n      newTypographyEl.classList.add(\"tree-item-label\");\n      slottedContent.replaceChild(newTypographyEl, slottedContent.firstChild!);\n      typographyEl = newTypographyEl;\n    } else if (typographyEl) {\n      contentHeight = typographyEl.scrollHeight;\n    }\n\n    const tooltipAlreadyExists = !!typographyEl?.closest(this.TOOLTIP);\n    const treeContent =\n      treeItem.shadowRoot?.querySelector(\n        this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n      ) || slottedContent;\n\n    if (\n      contentHeight &&\n      treeContent?.clientHeight &&\n      contentHeight > treeContent.clientHeight &&\n      !tooltipAlreadyExists &&\n      typographyEl\n    ) {\n      const tooltipEl = document.createElement(\"ic-tooltip\");\n      tooltipEl.setAttribute(\"target\", this.el.id);\n      tooltipEl.setAttribute(\"label\", typographyEl.textContent!);\n      tooltipEl.setAttribute(\"placement\", \"right\");\n\n      if (treeContent === slottedContent) {\n        treeContent.addEventListener(\"focus\", () =>\n          this.handleDisplayTooltip(true)\n        );\n        treeContent.addEventListener(\"blur\", () =>\n          this.handleDisplayTooltip(false)\n        );\n        tooltipEl.setAttribute(\"style\", \"overflow:hidden;\");\n        typographyEl.setAttribute(\n          \"style\",\n          \"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\n        );\n      } else {\n        tooltipEl.classList.add(\"ic-tooltip-overflow\");\n        typographyEl.classList.add(\"ic-text-overflow\");\n      }\n\n      treeContent.appendChild(tooltipEl);\n      tooltipEl.appendChild(typographyEl);\n    }\n  };\n\n  private removeTreeItemTruncation = (treeItem: HTMLIcTreeItemElement) => {\n    const slottedContent = treeItem.querySelector(\"[slot='router-item']\");\n    const typographyEl: HTMLIcTypographyElement =\n      treeItem.shadowRoot?.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR) ||\n      slottedContent!.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR)!;\n    const tooltipEl = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n    const treeContent =\n      treeItem.shadowRoot?.querySelector(\n        this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n      ) || slottedContent!;\n\n    if (tooltipEl) {\n      typographyEl.classList.remove(\"ic-text-overflow\");\n      treeContent.replaceChild(\n        treeContent === slottedContent\n          ? typographyEl.firstChild!\n          : typographyEl,\n        tooltipEl\n      );\n    }\n  };\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    return !!this.routerSlot;\n  }\n\n  private handleDisplayTooltip = (display: boolean) => {\n    const typographyEl =\n      this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n        this.TREE_ITEM_LABEL_CLASS_SELECTOR\n      ) || this.el.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR);\n    const tooltip = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n\n    tooltip?.displayTooltip(display);\n  };\n\n  render() {\n    const { disabled, label, selected, size, expanded, focusInset, theme } =\n      this;\n\n    const Component = this.href && !this.disabled ? \"a\" : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: this.href,\n      hrefLang: this.hreflang,\n      referrerPolicy: this.referrerpolicy,\n      rel: this.rel,\n      target: this.target,\n    };\n\n    return (\n      <Host\n        class={{\n          \"ic-tree-item-disabled\": disabled,\n          \"ic-tree-item-selected\": !disabled && selected,\n          [`ic-tree-item-${size}`]: size !== \"medium\",\n          \"ic-tree-item-focus-inset\": focusInset,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          \"ic-tree-item-truncate\": !!this.truncateTreeItem,\n        }}\n        id={this.treeItemId}\n      >\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\" />\n        ) : (\n          <Component\n            class={{\n              \"tree-item-content\": true,\n            }}\n            tabIndex={disabled ? -1 : 0}\n            onClick={this.handleTreeItemClicked}\n            ref={(el) => (this.treeItemElement = el)}\n            aria-disabled={disabled ? \"true\" : \"false\"}\n            aria-live=\"polite\"\n            {...attrs}\n            onFocus={() => this.handleDisplayTooltip(true)}\n            onBlur={() => this.handleDisplayTooltip(false)}\n          >\n            {this.isParent && (\n              <span\n                class={{\n                  [\"arrow-dropdown\"]: true,\n                  [\"tree-item-expanded\"]: expanded,\n                }}\n                aria-hidden=\"true\"\n                innerHTML={arrowDropdown}\n              />\n            )}\n            {isSlotUsed(this.el, \"icon\") && (\n              <div class=\"icon-container\">\n                <slot name=\"icon\" />\n              </div>\n            )}\n            <ic-typography class=\"tree-item-label\">\n              {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n            </ic-typography>\n          </Component>\n        )}\n        {expanded && (\n          <div aria-hidden={`${!expanded}`}>\n            <slot />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tree-item.js","sourceRoot":"","sources":["../../../src/components/ic-tree-item/ic-tree-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Watch,\n  State,\n  Listen,\n  Method,\n} from \"@stencil/core\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport arrowDropdown from \"../../assets/arrow-dropdown.svg\";\n\nlet treeItemIds = 0;\n\n/**\n * @slot label - Content is set as the tree item label.\n * @slot icon - Content is placed to the left of the label.\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n@Component({\n  tag: \"ic-tree-item\",\n  styleUrl: \"ic-tree-item.css\",\n  shadow: true,\n})\nexport class TreeItem {\n  private treeItemElement: HTMLElement | undefined;\n  private treeItemTag = \"IC-TREE-ITEM\";\n  private routerSlot: HTMLElement | null;\n  private hostMutationObserver: MutationObserver | null = null;\n  private TOOLTIP = \"ic-tooltip\";\n  private TREE_ITEM_LABEL_CLASS_SELECTOR = \".tree-item-label\";\n  private TREE_ITEM_CONTENT_CLASS_SELECTOR = \".tree-item-content\";\n\n  @Element() el: HTMLIcTreeItemElement;\n\n  @State() childTreeItems: HTMLIcTreeItemElement[];\n\n  /**\n   * If `true`, the tree item appears in the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the tree item appears in the expanded state.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.icTreeItemExpanded.emit({ isExpanded: this.expanded, id: this.el.id });\n  }\n\n  /**\n   * @internal Determines if the parent tree item has been expanded.\n   */\n  @Prop({ mutable: true }) hasParentExpanded: boolean = false;\n\n  /**\n   * The URL that the tree item link points to. If set, the tree item will render as an \"a\" tag, otherwise it will render as a div.\n   */\n  @Prop() href?: string | undefined;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * @internal If `true`, the tree item is a parent of other tree items.\n   */\n  @Prop({ mutable: true }) isParent: boolean = false;\n\n  /**\n   * The label of the tree item.\n   */\n  @Prop() label: string = \"\";\n\n  /**\n   * @internal Holds the previous truncation state before the screen switches to a small viewport, so it can be reset when screen size changes again.\n   */\n  @Prop() previousTruncateTreeItem?: boolean;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * If `true`, the tree item appears in the selected state.\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    if (this.selected) {\n      this.icTreeItemSelected.emit({ id: this.el.id });\n    }\n    this.updateAriaLabel();\n  }\n\n  /**\n   * @internal Determines the size of the tree item.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the tree item id. Must be unique.\n   */\n  @Prop() treeItemId?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the tree item label will be truncated instead of text wrapping.\n   */\n  @Prop() truncateTreeItem?: boolean;\n\n  /**\n   * Emitted when tree item is selected.\n   */\n  @Event() icTreeItemSelected: EventEmitter<{ id: string }>;\n\n  /**\n   * Emitted when tree item is expanded.\n   */\n  @Event() icTreeItemExpanded: EventEmitter<{\n    isExpanded: boolean;\n    id: string;\n  }>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    this.childTreeItems = Array.from((this.el as HTMLElement).children).filter(\n      (child) => child.tagName === this.treeItemTag\n    ) as HTMLIcTreeItemElement[];\n\n    if (this.childTreeItems.length > 0) {\n      this.isParent = true;\n    }\n  }\n\n  componentDidLoad(): void {\n    this.setTreeItemPadding();\n\n    this.updateAriaLabel();\n\n    !isSlotUsed(this.el, \"label\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Tree item\"\n      );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, \"icon\", this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n  componentDidRender(): void {\n    this.truncateTreeItem\n      ? this.truncateTreeItemLabel(this.el)\n      : this.removeTreeItemTruncation(this.el);\n    if (this.expanded) {\n      this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n        child.truncateTreeItem\n          ? this.truncateTreeItemLabel(child)\n          : this.removeTreeItemTruncation(child);\n      });\n    }\n  }\n\n  componentDidUpdate(): void {\n    if (this.hasParentExpanded) {\n      this.childTreeItems.forEach((child: HTMLIcTreeItemElement) => {\n        child.truncateTreeItem\n          ? this.truncateTreeItemLabel(child)\n          : this.removeTreeItemTruncation(child);\n      });\n      this.hasParentExpanded = false;\n    }\n  }\n\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    if (ev.key === \"Enter\" || ev.key === \" \") {\n      ev.stopImmediatePropagation();\n      this.handleTreeItemClicked();\n    }\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.hasRouterSlot()) {\n      this.routerSlot?.focus();\n    } else {\n      this.treeItemElement?.focus();\n    }\n  }\n\n  private handleTreeItemClicked = (): void => {\n    if (this.isParent) {\n      this.expanded = !this.expanded;\n      this.hasParentExpanded = true;\n    }\n\n    this.updateAriaLabel();\n    this.selected = true;\n    this.watchSelectedHandler();\n  };\n\n  /**\n   * @internal Updates the aria-label of the tree item.\n   */\n  @Method()\n  async updateAriaLabel(): Promise<void> {\n    let ariaLabel;\n\n    if (this.hasRouterSlot()) {\n      ariaLabel = this.routerSlot!.textContent;\n    } else if (isSlotUsed(this.el, \"label\")) {\n      ariaLabel = this.el.querySelector('[slot=\"label\"]')!.textContent;\n    } else {\n      ariaLabel = this.label;\n    }\n\n    if (this.isParent) {\n      ariaLabel = `${ariaLabel}, triggers submenu, ${\n        this.expanded ? \"expanded\" : \"collapsed\"\n      }`;\n    }\n\n    if (this.el.parentElement) {\n      const treeItems = Array.from(\n        (this.el.parentElement as HTMLElement).children\n      ).filter(\n        (child) => child.tagName === this.treeItemTag\n      ) as HTMLIcTreeItemElement[];\n\n      const index = treeItems.indexOf(this.el) + 1;\n      const parentChildren = treeItems.length;\n\n      ariaLabel = `${ariaLabel}, ${index} of ${parentChildren}`;\n    }\n\n    if (this.selected) {\n      ariaLabel = `${ariaLabel}, active`;\n    }\n\n    if (this.disabled) {\n      ariaLabel = `${ariaLabel}, dimmed`;\n    }\n\n    if (this.hasRouterSlot()) {\n      this.routerSlot!.ariaLabel = ariaLabel;\n    } else {\n      this.treeItemElement!.ariaLabel = ariaLabel;\n    }\n  }\n\n  private setTreeItemPadding = () => {\n    let level = 1;\n    let parentElement = this.el.parentElement;\n    const treeItemContent = this.el.shadowRoot?.querySelector(\n      this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n    ) as HTMLElement;\n\n    if (!parentElement) {\n      return;\n    }\n\n    const isSiblingOfParent = Array.from(parentElement.children).some(\n      (sibling) =>\n        sibling !== this.el &&\n        !sibling.querySelector('[slot=\"router-item\"]') &&\n        !sibling.querySelector('[slot=\"label\"]') &&\n        sibling.children.length > 0\n    );\n\n    if (\n      (isSiblingOfParent && !this.el.isParent) ||\n      (parentElement.tagName === this.treeItemTag && !this.el.isParent)\n    ) {\n      if (this.hasRouterSlot()) {\n        this.routerSlot!.classList.add(\"ic-tree-item-single\");\n      } else {\n        treeItemContent.classList.add(\"ic-tree-item-single\");\n      }\n    }\n\n    while (parentElement) {\n      if (parentElement.tagName === this.treeItemTag) {\n        level++;\n        treeItemContent.style.paddingLeft = !this.el.isParent\n          ? `calc(var(--ic-space-${isSiblingOfParent ? \"xl\" : \"xs\"}) + ${\n              level * (isSiblingOfParent ? 16 : 24)\n            }px)`\n          : `${level * 16}px`;\n      }\n      parentElement = parentElement.parentElement;\n    }\n  };\n\n  private truncateTreeItemLabel = (treeItem: HTMLIcTreeItemElement) => {\n    let typographyEl =\n      treeItem.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n        this.TREE_ITEM_LABEL_CLASS_SELECTOR\n      );\n    const slottedContent = treeItem.querySelector(\"[slot='router-item']\");\n    let contentHeight = slottedContent?.scrollHeight;\n\n    if (!typographyEl && slottedContent) {\n      const newTypographyEl = document.createElement(\"ic-typography\");\n      newTypographyEl.innerHTML = slottedContent.textContent!;\n      newTypographyEl.classList.add(\"tree-item-label\");\n      slottedContent.replaceChild(newTypographyEl, slottedContent.firstChild!);\n      typographyEl = newTypographyEl;\n    } else if (typographyEl) {\n      contentHeight = typographyEl.scrollHeight;\n    }\n\n    const tooltipAlreadyExists = !!typographyEl?.closest(this.TOOLTIP);\n    const treeContent =\n      treeItem.shadowRoot?.querySelector(\n        this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n      ) || slottedContent;\n\n    if (treeContent) {\n      const computedHeight = parseFloat(getComputedStyle(treeContent).height);\n      if (\n        contentHeight &&\n        computedHeight &&\n        contentHeight > computedHeight &&\n        !tooltipAlreadyExists &&\n        typographyEl\n      ) {\n        const tooltipEl = document.createElement(\"ic-tooltip\");\n        tooltipEl.setAttribute(\"target\", this.el.id);\n        tooltipEl.setAttribute(\"label\", typographyEl.textContent!);\n        tooltipEl.setAttribute(\"placement\", \"right\");\n\n        if (treeContent === slottedContent) {\n          treeContent.addEventListener(\"focus\", () =>\n            this.handleDisplayTooltip(true)\n          );\n          treeContent.addEventListener(\"blur\", () =>\n            this.handleDisplayTooltip(false)\n          );\n          tooltipEl.setAttribute(\"style\", \"overflow:hidden;\");\n          typographyEl.setAttribute(\n            \"style\",\n            \"overflow:hidden;text-overflow:ellipsis;white-space:nowrap;\"\n          );\n        } else {\n          tooltipEl.classList.add(\"ic-tooltip-overflow\");\n          typographyEl.classList.add(\"ic-text-overflow\");\n        }\n\n        treeContent.appendChild(tooltipEl);\n        tooltipEl.appendChild(typographyEl);\n      }\n    }\n  };\n\n  private removeTreeItemTruncation = (treeItem: HTMLIcTreeItemElement) => {\n    const slottedContent = treeItem.querySelector(\"[slot='router-item']\");\n    const typographyEl: HTMLIcTypographyElement =\n      treeItem.shadowRoot?.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR) ||\n      slottedContent!.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR)!;\n    const tooltipEl = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n    const treeContent =\n      treeItem.shadowRoot?.querySelector(\n        this.TREE_ITEM_CONTENT_CLASS_SELECTOR\n      ) || slottedContent!;\n\n    if (tooltipEl) {\n      typographyEl.classList.remove(\"ic-text-overflow\");\n      treeContent.replaceChild(\n        treeContent === slottedContent\n          ? typographyEl.firstChild!\n          : typographyEl,\n        tooltipEl\n      );\n    }\n  };\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    return !!this.routerSlot;\n  }\n\n  private handleDisplayTooltip = (display: boolean) => {\n    const typographyEl =\n      this.el.shadowRoot?.querySelector<HTMLIcTypographyElement>(\n        this.TREE_ITEM_LABEL_CLASS_SELECTOR\n      ) || this.el.querySelector(this.TREE_ITEM_LABEL_CLASS_SELECTOR);\n    const tooltip = typographyEl?.closest<HTMLIcTooltipElement>(this.TOOLTIP);\n\n    tooltip?.displayTooltip(display);\n  };\n\n  render() {\n    const { disabled, label, selected, size, expanded, theme } = this;\n\n    const Component = this.href && !this.disabled ? \"a\" : \"div\";\n\n    const attrs = Component == \"a\" && {\n      href: this.href,\n      hrefLang: this.hreflang,\n      referrerPolicy: this.referrerpolicy,\n      rel: this.rel,\n      target: this.target,\n    };\n\n    return (\n      <Host\n        class={{\n          \"ic-tree-item-disabled\": disabled,\n          \"ic-tree-item-selected\": !disabled && selected,\n          [`ic-tree-item-${size}`]: size !== \"medium\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          \"ic-tree-item-truncate\": !!this.truncateTreeItem,\n        }}\n        id={this.treeItemId ?? `ic-tree-item-${treeItemIds++}`}\n      >\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\" />\n        ) : (\n          <Component\n            class={{\n              \"tree-item-content\": true,\n            }}\n            tabIndex={disabled ? -1 : 0}\n            onClick={this.handleTreeItemClicked}\n            ref={(el) => (this.treeItemElement = el)}\n            aria-disabled={disabled ? \"true\" : \"false\"}\n            aria-live=\"polite\"\n            {...attrs}\n            onFocus={() => this.handleDisplayTooltip(true)}\n            onBlur={() => this.handleDisplayTooltip(false)}\n          >\n            {this.isParent && (\n              <span\n                class={{\n                  [\"arrow-dropdown\"]: true,\n                  [\"tree-item-expanded\"]: expanded,\n                }}\n                aria-hidden=\"true\"\n                innerHTML={arrowDropdown}\n              />\n            )}\n            {isSlotUsed(this.el, \"icon\") && (\n              <div class=\"icon-container\">\n                <slot name=\"icon\" />\n              </div>\n            )}\n            <ic-typography class=\"tree-item-label\">\n              {isSlotUsed(this.el, \"label\") ? <slot name=\"label\" /> : label}\n            </ic-typography>\n          </Component>\n        )}\n        {expanded && (\n          <div aria-hidden={`${!expanded}`}>\n            <slot />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}