@ukic/canary-web-components 2.0.0-canary.37 → 2.0.0-canary.39

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

@@ -62,6 +62,12 @@ export const Value = () => {
     datePicker.value = "01/01/2024";
     return datePicker;
 };
+export const ValueCalendarOnlyMode = () => {
+    const datePicker = createDatePickerElement();
+    datePicker.value = "06/06/1944";
+    datePicker.showDateInput = false;
+    return datePicker;
+};
 export const OpenAt = () => {
     const datePicker = createDatePickerElement();
     datePicker.helperText =
@@ -122,18 +128,27 @@ export const JSDates = () => {
     datePicker.value = new Date(2024, 6, 15);
     return datePicker;
 };
-const updateSelectedDate = (ev) => {
+const handleDateChange = (ev) => {
     const el = document.querySelector("#selected-date");
     let text = "Selected date: ";
     if (ev.detail.value) {
         text += ev.detail.value;
     }
     el.innerHTML = text;
-    console.log("ic-change", ev.detail.value);
+    console.log("icChange: ", ev.detail.value);
+};
+const handleSelectedDateChange = (ev) => {
+    const el = document.querySelector("#selected-date");
+    let text = "Selected date: ";
+    if (ev.detail.value) {
+        text += ev.detail.value;
+    }
+    el.innerHTML = text;
+    console.log("icSelectedDateChange: ", ev.detail.value);
 };
 export const IcChangeDate = () => {
     const datePicker = createDatePickerElement();
-    datePicker.addEventListener("icChange", updateSelectedDate);
+    datePicker.addEventListener("icChange", handleDateChange);
     const container = document.createElement("div");
     const selDate = document.createElement("span");
     selDate.innerText = "Selected date:";
@@ -145,4 +160,20 @@ export const IcChangeDate = () => {
     container.style.gap = "50px";
     return container;
 };
+export const IcSelectedDateChange = () => {
+    const datePicker = createDatePickerElement();
+    datePicker.size = "large";
+    datePicker.showDateInput = false;
+    datePicker.addEventListener("icSelectedDateChange", handleSelectedDateChange);
+    const container = document.createElement("div");
+    const selDate = document.createElement("div");
+    selDate.innerText = "Selected date:";
+    selDate.id = "selected-date";
+    container.appendChild(datePicker);
+    container.appendChild(selDate);
+    container.style.display = "flex";
+    container.style.flexDirection = "column";
+    container.style.gap = "50px";
+    return container;
+};
 //# sourceMappingURL=story-data.js.map

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":"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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 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.value);\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"]}
+{"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 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 ValueCalendarOnlyMode = (): HTMLIcDatePickerElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.value = \"06/06/1944\";\n  datePicker.showDateInput = false;\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 handleDateChange = (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(\"icChange: \", ev.detail.value);\n};\n\nconst handleSelectedDateChange = (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(\"icSelectedDateChange: \", ev.detail.value);\n};\n\nexport const IcChangeDate = (): HTMLElement => {\n  const datePicker = createDatePickerElement();\n  datePicker.addEventListener(\"icChange\", handleDateChange);\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 IcSelectedDateChange = (): HTMLElement => {\n  const datePicker = createDatePickerElement();\n\n  datePicker.size = \"large\";\n  datePicker.showDateInput = false;\n\n  datePicker.addEventListener(\"icSelectedDateChange\", handleSelectedDateChange);\n  const container = document.createElement(\"div\");\n\n  const selDate = document.createElement(\"div\");\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-pagination-bar/ic-pagination-bar.stories.js

@@ -0,0 +1,260 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import readme from "./readme.md";
+import { html } from "lit-html";
+export default {
+    title: "Web Components/Pagination Bar",
+    component: "ic-pagination-bar",
+    parameters: {
+        componentAPI: {
+            data: readme,
+        },
+    },
+};
+/**
+ * Use the pagination bar when large amounts of content are split across multiple pages and various pagination options are required.
+ *
+ * There is one required attribute for the pagination bar:
+ * - total-items: `number`
+ *
+ * Click the 'Component API' tab to view all the available attributes, events and slots for pagination bar.
+ *
+ * To use the pagination bar component, import `@ukic/canary-web-components` into your application.
+ */
+export const Basic = {
+    render: () => html `<div style="height: 120px;">
+      <ic-pagination-bar total-items="100"></ic-pagination-bar>
+    </div>`,
+    name: "Basic",
+};
+/**
+ * Pagination bar will display the number of pages out of the total number of pages as well as the `simple` pagination type.
+ *
+ * By default, the items per page is set to 10. If the total items is greater than 100, the default items per page is set to 25.
+ *
+ * To display the items per page control, set the `show-items-per-page-control` attribute to `true`.
+ *
+ * The items per page control will display a dropdown with options to select the number of items to display per page. Customize the options by setting the `itemsPerPageOptions` property.
+ * `itemsPerPageOptions` is an array of objects with `label` and `value` properties. If more than three options are provided, the dropdown will display the first three options and an 'All' option.
+ */
+export const ItemsPerPageControl = {
+    render: () => html `<div style="height: 150px;">
+      <ic-pagination-bar
+        total-items="100"
+        show-items-per-page-control="true"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Items per page control",
+};
+/**
+ * To display the go to page control, set the `show-go-to-page-control` attribute to `true`. 'Go to page' allows the user to jump to a specific page. If the page number is invalid, the input will be styled in the `ic-status-error` colour with a tooltip detailing the error.
+ */
+export const GoToPageControl = {
+    render: () => html `<div style="height: 120px;">
+      <ic-pagination-bar
+        total-items="100"
+        show-go-to-page-control="true"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Go to page control",
+};
+/**
+ * The pagination range label type can be set to two types:
+ * - `simple`: \[default]: Display the total number of pages and the current page number.
+ * - `data`: Displays the total number of items and the items range.
+ *
+ * The example below uses the `data` pagination range label type. The range is updated when the page is changed.
+ */
+export const PaginationRangeLabelType = {
+    render: () => html `<div style="height: 150px;">
+      <ic-pagination-bar
+        total-items="100"
+        show-items-per-page-control="true"
+        show-go-to-page-control="true"
+        range-label-type="data"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Pagination range label type",
+};
+/**
+ * 'Item' can be changed to a custom label by setting the `item-label` attribute. Any occurrences of 'Item' in the pagination bar will be replaced with the custom label.
+ */
+export const PaginationItemLabel = {
+    render: () => html `<div style="height: 150px;">
+      <ic-pagination-bar
+        total-items="100"
+        show-items-per-page-control="true"
+        show-go-to-page-control="true"
+        range-label-type="data"
+        item-label="Image"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Pagination item label",
+};
+/**
+ * The pagination type can be set to two types:
+ * - `simple`: \[default]: Display the current page as a label with back and next buttons.
+ * - `complex`: Displays all the page numbers as buttons with back and next buttons.
+ *
+ * The `complex` pagination type is useful when there are many pages to navigate through.
+ */
+export const PaginationType = {
+    render: () => html `<div style="height: 150px;">
+      <ic-pagination-bar
+        total-items="100"
+        show-items-per-page-control="true"
+        type="complex"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Pagination type",
+};
+/**
+ * The pagination elements can be aligned to the `right` (default), `left` or `space-between`.
+ */
+export const AlignmentLeft = {
+    render: () => html `<div style="height: 150px;">
+      <ic-pagination-bar
+        total-items="100"
+        alignment="left"
+        show-items-per-page-control="true"
+        show-go-to-page-control="true"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Alignment left",
+};
+export const AlignmentSpaceBetween = {
+    render: () => html `<div style="height: 150px;">
+      <ic-pagination-bar
+        total-items="100"
+        alignment="space-between"
+        show-items-per-page-control="true"
+        show-go-to-page-control="true"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Alignment space between",
+};
+/**
+ * The background colour of the pagination bar can be customized by adding a background colour to the parent element. The `appearance` attribute can be set to `light` or `dark` to change the appearance of the pagination bar labels.
+ */
+export const Appearance = {
+    render: () => html `<div
+      style="display: flex; flex-direction: column; gap: 8px; height: 220px"
+    >
+      <div style="background-color: var(--ic-architectural-black)">
+        <ic-pagination-bar
+          total-items="100"
+          appearance="light"
+          show-items-per-page-control="true"
+          show-go-to-page-control="true"
+        ></ic-pagination-bar>
+      </div>
+      <div style="background-color: var(--ic-status-info-contrast)">
+        <ic-pagination-bar
+          total-items="100"
+          appearance="dark"
+          show-items-per-page-control="true"
+          show-go-to-page-control="true"
+        ></ic-pagination-bar>
+      </div>
+    </div>`,
+    name: "Appearance",
+};
+/**
+ * If the pagination bar becomes cluttered due to the number of pagination elements displayed, the range label can be hidden by setting the `hide-range-label` attribute to `true`.
+ */
+export const HideRangeLabel = {
+    render: () => html `<div style="height:150px">
+      <div style="background-color: var(--ic-architectural-100)">
+        <ic-pagination-bar
+          total-items="100"
+          appearance="dark"
+          hide-range-label="true"
+          show-items-per-page-control="true"
+          show-go-to-page-control="true"
+        ></ic-pagination-bar>
+      </div>
+    </div>`,
+    name: "Hide range label",
+};
+/**
+ * If you have a predefined list of items you want in the itemsPerPage select, the 'All' option can be hidden by setting `hide-all-from-items-per-page` to `true`.
+ */
+export const HideAllFromItemsPerPage = {
+    render: () => html `<div style="height:150px">
+      <ic-pagination-bar
+        total-items="100"
+        show-items-per-page-control="true"
+        show-go-to-page-control="true"
+        hide-all-from-items-per-page="true"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Hide all from items per page",
+};
+export const SetToFirstPageWhenItemsPerPageChanges = {
+    render: () => html `<div style="height:150px">
+      <ic-pagination-bar
+        total-items="100"
+        show-items-per-page-control="true"
+        show-go-to-page-control="true"
+        hide-all-from-items-per-page="true"
+        set-to-first-page-on-pagination-change="true"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Set to first page when items per page changes",
+};
+/**
+ * The `selected-items-per-page` prop can be used to programmatically set the items per page dropdown option.
+ */
+export const SetSelectedItemsPerPage = {
+    render: () => html `<div style="height:150px">
+      <ic-pagination-bar
+        total-items="100"
+        show-items-per-page-control="true"
+        show-go-to-page-control="true"
+        selected-items-per-page="25"
+      ></ic-pagination-bar>
+    </div>`,
+    name: "Set the selected items per page",
+};
+/**
+ * The `selected-items-per-page` prop can be used to programmatically set the selected items per page dropdown option. If provided, this prop must match one of the items per page dropdown options, otherwise an error appears on the console and the prop is ignored.
+ */
+export const SetSelectedItemsPerPageToInvalidValue = {
+    render: () => html `<div style="height:150px">
+    <ic-pagination-bar
+      total-items="100"
+      show-items-per-page-control="true"
+      show-go-to-page-control="true"
+      selected-items-per-page="99"
+    ></ic-pagination-bar>
+  </div>`,
+    name: "Set the selected items per page to an invalid value",
+};
+/**
+ * The `current-page` prop can be used to programmatically set the current page.
+ */
+export const SetCurrentPage = {
+    render: () => html `<div style="height:150px">
+    <ic-pagination-bar
+      total-items="100"
+      show-items-per-page-control="true"
+      show-go-to-page-control="true"
+      current-page="3"
+    ></ic-pagination-bar>
+  </div>`,
+    name: "Set the current page",
+};
+/**
+ * The `current-page` prop can be used to programmatically set the current page. If provided, this prop must be greater than 0 and less than or equal to the total number of pages, otherwise an error appears on the console and the prop is ignored.
+ */
+export const SetCurrentPageToInvalidValue = {
+    render: () => html `<div style="height:150px">
+    <ic-pagination-bar
+      total-items="100"
+      show-items-per-page-control="true"
+      show-go-to-page-control="true"
+      current-page="-1"
+    ></ic-pagination-bar>
+  </div>`,
+    name: "Set the current page to an invalid value",
+};
+//# sourceMappingURL=ic-pagination-bar.stories.js.map

package/dist/collection/components/ic-pagination-bar/ic-pagination-bar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-pagination-bar.stories.js","sourceRoot":"","sources":["../../../src/components/ic-pagination-bar/ic-pagination-bar.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport readme from \"./readme.md\";\nimport { html } from \"lit-html\";\n\nexport default {\n  title: \"Web Components/Pagination Bar\",\n  component: \"ic-pagination-bar\",\n\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the pagination bar when large amounts of content are split across multiple pages and various pagination options are required.\n *\n * There is one required attribute for the pagination bar:\n * - total-items: `number`\n *\n * Click the 'Component API' tab to view all the available attributes, events and slots for pagination bar.\n *\n * To use the pagination bar component, import `@ukic/canary-web-components` into your application.\n */\nexport const Basic = {\n  render: () =>\n    html`<div style=\"height: 120px;\">\n      <ic-pagination-bar total-items=\"100\"></ic-pagination-bar>\n    </div>`,\n  name: \"Basic\",\n};\n\n/**\n * Pagination bar will display the number of pages out of the total number of pages as well as the `simple` pagination type.\n *\n * By default, the items per page is set to 10. If the total items is greater than 100, the default items per page is set to 25.\n *\n * To display the items per page control, set the `show-items-per-page-control` attribute to `true`.\n *\n * The items per page control will display a dropdown with options to select the number of items to display per page. Customize the options by setting the `itemsPerPageOptions` property.\n * `itemsPerPageOptions` is an array of objects with `label` and `value` properties. If more than three options are provided, the dropdown will display the first three options and an 'All' option.\n */\nexport const ItemsPerPageControl = {\n  render: () =>\n    html`<div style=\"height: 150px;\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        show-items-per-page-control=\"true\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Items per page control\",\n};\n\n/**\n * To display the go to page control, set the `show-go-to-page-control` attribute to `true`. 'Go to page' allows the user to jump to a specific page. If the page number is invalid, the input will be styled in the `ic-status-error` colour with a tooltip detailing the error.\n */\nexport const GoToPageControl = {\n  render: () =>\n    html`<div style=\"height: 120px;\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        show-go-to-page-control=\"true\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Go to page control\",\n};\n\n/**\n * The pagination range label type can be set to two types:\n * - `simple`: \\[default]: Display the total number of pages and the current page number.\n * - `data`: Displays the total number of items and the items range.\n *\n * The example below uses the `data` pagination range label type. The range is updated when the page is changed.\n */\nexport const PaginationRangeLabelType = {\n  render: () =>\n    html`<div style=\"height: 150px;\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        show-items-per-page-control=\"true\"\n        show-go-to-page-control=\"true\"\n        range-label-type=\"data\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Pagination range label type\",\n};\n\n/**\n * 'Item' can be changed to a custom label by setting the `item-label` attribute. Any occurrences of 'Item' in the pagination bar will be replaced with the custom label.\n */\nexport const PaginationItemLabel = {\n  render: () =>\n    html`<div style=\"height: 150px;\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        show-items-per-page-control=\"true\"\n        show-go-to-page-control=\"true\"\n        range-label-type=\"data\"\n        item-label=\"Image\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Pagination item label\",\n};\n\n/**\n * The pagination type can be set to two types:\n * - `simple`: \\[default]: Display the current page as a label with back and next buttons.\n * - `complex`: Displays all the page numbers as buttons with back and next buttons.\n *\n * The `complex` pagination type is useful when there are many pages to navigate through.\n */\nexport const PaginationType = {\n  render: () =>\n    html`<div style=\"height: 150px;\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        show-items-per-page-control=\"true\"\n        type=\"complex\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Pagination type\",\n};\n\n/**\n * The pagination elements can be aligned to the `right` (default), `left` or `space-between`.\n */\nexport const AlignmentLeft = {\n  render: () =>\n    html`<div style=\"height: 150px;\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        alignment=\"left\"\n        show-items-per-page-control=\"true\"\n        show-go-to-page-control=\"true\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Alignment left\",\n};\n\nexport const AlignmentSpaceBetween = {\n  render: () =>\n    html`<div style=\"height: 150px;\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        alignment=\"space-between\"\n        show-items-per-page-control=\"true\"\n        show-go-to-page-control=\"true\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Alignment space between\",\n};\n\n/**\n * The background colour of the pagination bar can be customized by adding a background colour to the parent element. The `appearance` attribute can be set to `light` or `dark` to change the appearance of the pagination bar labels.\n */\nexport const Appearance = {\n  render: () =>\n    html`<div\n      style=\"display: flex; flex-direction: column; gap: 8px; height: 220px\"\n    >\n      <div style=\"background-color: var(--ic-architectural-black)\">\n        <ic-pagination-bar\n          total-items=\"100\"\n          appearance=\"light\"\n          show-items-per-page-control=\"true\"\n          show-go-to-page-control=\"true\"\n        ></ic-pagination-bar>\n      </div>\n      <div style=\"background-color: var(--ic-status-info-contrast)\">\n        <ic-pagination-bar\n          total-items=\"100\"\n          appearance=\"dark\"\n          show-items-per-page-control=\"true\"\n          show-go-to-page-control=\"true\"\n        ></ic-pagination-bar>\n      </div>\n    </div>`,\n\n  name: \"Appearance\",\n};\n\n/**\n * If the pagination bar becomes cluttered due to the number of pagination elements displayed, the range label can be hidden by setting the `hide-range-label` attribute to `true`.\n */\nexport const HideRangeLabel = {\n  render: () =>\n    html`<div style=\"height:150px\">\n      <div style=\"background-color: var(--ic-architectural-100)\">\n        <ic-pagination-bar\n          total-items=\"100\"\n          appearance=\"dark\"\n          hide-range-label=\"true\"\n          show-items-per-page-control=\"true\"\n          show-go-to-page-control=\"true\"\n        ></ic-pagination-bar>\n      </div>\n    </div>`,\n\n  name: \"Hide range label\",\n};\n\n/**\n * If you have a predefined list of items you want in the itemsPerPage select, the 'All' option can be hidden by setting `hide-all-from-items-per-page` to `true`.\n */\nexport const HideAllFromItemsPerPage = {\n  render: () =>\n    html`<div style=\"height:150px\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        show-items-per-page-control=\"true\"\n        show-go-to-page-control=\"true\"\n        hide-all-from-items-per-page=\"true\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Hide all from items per page\",\n};\n\nexport const SetToFirstPageWhenItemsPerPageChanges = {\n  render: () =>\n    html`<div style=\"height:150px\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        show-items-per-page-control=\"true\"\n        show-go-to-page-control=\"true\"\n        hide-all-from-items-per-page=\"true\"\n        set-to-first-page-on-pagination-change=\"true\"\n      ></ic-pagination-bar>\n    </div>`,\n\n  name: \"Set to first page when items per page changes\",\n};\n\n/**\n * The `selected-items-per-page` prop can be used to programmatically set the items per page dropdown option.\n */\nexport const SetSelectedItemsPerPage = {\n  render: () =>\n    html`<div style=\"height:150px\">\n      <ic-pagination-bar\n        total-items=\"100\"\n        show-items-per-page-control=\"true\"\n        show-go-to-page-control=\"true\"\n        selected-items-per-page=\"25\"\n      ></ic-pagination-bar>\n    </div>`,\n  name: \"Set the selected items per page\",\n};\n\n/**\n * The `selected-items-per-page` prop can be used to programmatically set the selected items per page dropdown option. If provided, this prop must match one of the items per page dropdown options, otherwise an error appears on the console and the prop is ignored.\n */\nexport const SetSelectedItemsPerPageToInvalidValue = {\n  render: () => html`<div style=\"height:150px\">\n    <ic-pagination-bar\n      total-items=\"100\"\n      show-items-per-page-control=\"true\"\n      show-go-to-page-control=\"true\"\n      selected-items-per-page=\"99\"\n    ></ic-pagination-bar>\n  </div>`,\n  name: \"Set the selected items per page to an invalid value\",\n};\n\n/**\n * The `current-page` prop can be used to programmatically set the current page.\n */\nexport const SetCurrentPage = {\n  render: () => html`<div style=\"height:150px\">\n    <ic-pagination-bar\n      total-items=\"100\"\n      show-items-per-page-control=\"true\"\n      show-go-to-page-control=\"true\"\n      current-page=\"3\"\n    ></ic-pagination-bar>\n  </div>`,\n  name: \"Set the current page\",\n};\n\n/**\n * The `current-page` prop can be used to programmatically set the current page. If provided, this prop must be greater than 0 and less than or equal to the total number of pages, otherwise an error appears on the console and the prop is ignored.\n */\nexport const SetCurrentPageToInvalidValue = {\n  render: () => html`<div style=\"height:150px\">\n    <ic-pagination-bar\n      total-items=\"100\"\n      show-items-per-page-control=\"true\"\n      show-go-to-page-control=\"true\"\n      current-page=\"-1\"\n    ></ic-pagination-bar>\n  </div>`,\n  name: \"Set the current page to an invalid value\",\n};\n"]}

package/dist/collection/components/ic-select-with-multi/ic-select-multi.stories.js

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import readme from "./readme.md";
+import { Default, DefaultValue, Disabled, DisabledOptions, Groups, HelperText, HiddenLabel, InForm, LoadingWithError, ReadOnly, Recommended, Required, Sizes, Validation, WithClearButton, WithDescriptions, } from "./story-data";
+export default {
+    title: "Web Components/Multi-Select",
+    component: "ic-select-with-multi",
+    parameters: {
+        componentAPI: {
+            data: readme,
+        },
+    },
+};
+/**
+ * Use the multi-select component to allow users to select one or more values from a list of options.
+ * There is one required prop for the multi-select:
+ * - label: `string`
+ *
+ * Click the 'Component API' tab to view all the available props, events and slots for the multi-select.
+ *
+ * To use the multi-select component, import `@ukic/canary-web-components` into your application.
+ *
+ * The component tag name for the multi-select is `ic-select-with-multi`.
+ * Even though it is a variant of the `ic-select` component (which includes the single and searchable selects), this different tag name is necessary because of the need to keep the multi-select functionality separate while it is experimental (in a canary release).
+ * Note that the `multiple` prop still needs to be applied in order to enable the multi-select functionality.
+ */
+export const DefaultExample = {
+    render: () => Default(),
+    name: "Default",
+};
+/**
+ * Show options as pre-selected by setting the `value` prop to an array containing the values of these options.
+ */
+export const DefaultValueExample = {
+    render: () => DefaultValue(),
+    name: "Default Value",
+};
+/**
+ * Display a clear button by using the `show-clear-button` prop.
+ * This will appear when the user has selected some options and allow them to easily clear their selection.
+ */
+export const WithClearButtonExample = {
+    render: () => WithClearButton(),
+    name: "With Clear Button",
+};
+/**
+ * Display extra information about the options by providing a description using the `description` property for each option.
+ */
+export const WithDescriptionsExample = {
+    render: () => WithDescriptions(),
+    name: "With Descriptions",
+};
+/**
+ * Display helper text to provide additional information by using the `helper-text` prop.
+ */
+export const HelperTextExample = {
+    render: () => HelperText(),
+    name: "Helper Text",
+};
+/**
+ * Set the size of the multi-select by using the `size` prop. This prop takes the values `small`, `default` or `large`.
+ * Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.
+ * The `default` variant is seen in the first [default](#default) example.
+ */
+export const SizesExample = {
+    render: () => Sizes(),
+    name: "Sizes",
+};
+/**
+ * Disable the multi-select and prevent user interaction by using the `disabled` prop.
+ */
+export const DisabledExample = {
+    render: () => Disabled(),
+    name: "Disabled",
+};
+/**
+ * Disable certain options by setting the `disabled` property to `true` for each option.
+ */
+export const DisabledOptionsExample = {
+    render: () => DisabledOptions(),
+    name: "Disabled Options",
+};
+/**
+ * Hide the visible label for the multi-select by using the `hide-label` prop.
+ */
+export const HiddenLabelExample = {
+    render: () => HiddenLabel(),
+    name: "Hidden Label",
+};
+/**
+ * Inform the user that the multi-select is a required field by using the `required` prop.
+ * This will display an asterisk next to the label and apply the `aria-required` attribute.
+ */
+export const RequiredExample = {
+    render: () => Required(),
+    name: "Required",
+};
+/**
+ * Make the multi-select read-only by using the `readonly` prop.
+ * Use the `value` prop to set which options are selected and will be displayed when it is read-only.
+ */
+export const ReadOnlyExample = {
+    render: () => ReadOnly(),
+    name: "Read-only",
+};
+/**
+ * Display options in groups by passing an array of child options to the `children` property of a parent option.
+ * The parent option will be rendered as the title of the group.
+ */
+export const GroupsExample = {
+    render: () => Groups(),
+    name: "Groups",
+};
+/**
+ * Display certain options at the top of the option list by setting the `recommended` property to `true` on each option.
+ * This will allow for quick access to these options.
+ */
+export const RecommendedExample = {
+    render: () => Recommended(),
+    name: "Recommended",
+};
+/**
+ * Display a validation status and message by using the `validation-status` and `validation-message` props.
+ * The `validation-status` prop takes the values `success`, `warning` or `error`.
+ */
+export const ValidationExample = {
+    render: () => Validation(),
+    name: "Validation",
+};
+/**
+ * Display the loading state by using the `loading` prop.
+ * The multi-select will show a loading error after the amount of time specified using the `timeout` prop has elapsed.
+ */
+export const LoadingWithErrorExample = {
+    render: () => LoadingWithError(),
+    name: "Loading With Error",
+};
+/**
+ * An example of the multi-select working in a form. The value will appear in the console on submit.
+ */
+export const InFormExample = {
+    render: () => InForm(),
+    name: "In Form",
+};
+//# sourceMappingURL=ic-select-multi.stories.js.map

package/dist/collection/components/ic-select-with-multi/ic-select-multi.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-select-multi.stories.js","sourceRoot":"","sources":["../../../src/components/ic-select-with-multi/ic-select-multi.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport readme from \"./readme.md\";\nimport {\n  Default,\n  DefaultValue,\n  Disabled,\n  DisabledOptions,\n  Groups,\n  HelperText,\n  HiddenLabel,\n  InForm,\n  LoadingWithError,\n  ReadOnly,\n  Recommended,\n  Required,\n  Sizes,\n  Validation,\n  WithClearButton,\n  WithDescriptions,\n} from \"./story-data\";\n\nexport default {\n  title: \"Web Components/Multi-Select\",\n  component: \"ic-select-with-multi\",\n\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the multi-select component to allow users to select one or more values from a list of options.\n * There is one required prop for the multi-select:\n * - label: `string`\n *\n * Click the 'Component API' tab to view all the available props, events and slots for the multi-select.\n *\n * To use the multi-select component, import `@ukic/canary-web-components` into your application.\n *\n * The component tag name for the multi-select is `ic-select-with-multi`.\n * Even though it is a variant of the `ic-select` component (which includes the single and searchable selects), this different tag name is necessary because of the need to keep the multi-select functionality separate while it is experimental (in a canary release).\n * Note that the `multiple` prop still needs to be applied in order to enable the multi-select functionality.\n */\nexport const DefaultExample = {\n  render: () => Default(),\n  name: \"Default\",\n};\n\n/**\n * Show options as pre-selected by setting the `value` prop to an array containing the values of these options.\n */\nexport const DefaultValueExample = {\n  render: () => DefaultValue(),\n  name: \"Default Value\",\n};\n\n/**\n * Display a clear button by using the `show-clear-button` prop.\n * This will appear when the user has selected some options and allow them to easily clear their selection.\n */\nexport const WithClearButtonExample = {\n  render: () => WithClearButton(),\n  name: \"With Clear Button\",\n};\n\n/**\n * Display extra information about the options by providing a description using the `description` property for each option.\n */\nexport const WithDescriptionsExample = {\n  render: () => WithDescriptions(),\n  name: \"With Descriptions\",\n};\n\n/**\n * Display helper text to provide additional information by using the `helper-text` prop.\n */\nexport const HelperTextExample = {\n  render: () => HelperText(),\n  name: \"Helper Text\",\n};\n\n/**\n * Set the size of the multi-select by using the `size` prop. This prop takes the values `small`, `default` or `large`.\n * Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\n * The `default` variant is seen in the first [default](#default) example.\n */\nexport const SizesExample = {\n  render: () => Sizes(),\n  name: \"Sizes\",\n};\n\n/**\n * Disable the multi-select and prevent user interaction by using the `disabled` prop.\n */\nexport const DisabledExample = {\n  render: () => Disabled(),\n  name: \"Disabled\",\n};\n\n/**\n * Disable certain options by setting the `disabled` property to `true` for each option.\n */\nexport const DisabledOptionsExample = {\n  render: () => DisabledOptions(),\n  name: \"Disabled Options\",\n};\n\n/**\n * Hide the visible label for the multi-select by using the `hide-label` prop.\n */\nexport const HiddenLabelExample = {\n  render: () => HiddenLabel(),\n  name: \"Hidden Label\",\n};\n\n/**\n * Inform the user that the multi-select is a required field by using the `required` prop.\n * This will display an asterisk next to the label and apply the `aria-required` attribute.\n */\nexport const RequiredExample = {\n  render: () => Required(),\n  name: \"Required\",\n};\n\n/**\n * Make the multi-select read-only by using the `readonly` prop.\n * Use the `value` prop to set which options are selected and will be displayed when it is read-only.\n */\nexport const ReadOnlyExample = {\n  render: () => ReadOnly(),\n  name: \"Read-only\",\n};\n\n/**\n * Display options in groups by passing an array of child options to the `children` property of a parent option.\n * The parent option will be rendered as the title of the group.\n */\nexport const GroupsExample = {\n  render: () => Groups(),\n  name: \"Groups\",\n};\n\n/**\n * Display certain options at the top of the option list by setting the `recommended` property to `true` on each option.\n * This will allow for quick access to these options.\n */\nexport const RecommendedExample = {\n  render: () => Recommended(),\n  name: \"Recommended\",\n};\n\n/**\n * Display a validation status and message by using the `validation-status` and `validation-message` props.\n * The `validation-status` prop takes the values `success`, `warning` or `error`.\n */\nexport const ValidationExample = {\n  render: () => Validation(),\n  name: \"Validation\",\n};\n\n/**\n * Display the loading state by using the `loading` prop.\n * The multi-select will show a loading error after the amount of time specified using the `timeout` prop has elapsed.\n */\nexport const LoadingWithErrorExample = {\n  render: () => LoadingWithError(),\n  name: \"Loading With Error\",\n};\n\n/**\n * An example of the multi-select working in a form. The value will appear in the console on submit.\n */\nexport const InFormExample = {\n  render: () => InForm(),\n  name: \"In Form\",\n};\n"]}

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

@@ -51,9 +51,19 @@
   background-color: var(--ic-action-dark-bg-active) !important;
 }
 
+:host(.ic-tree-item-light) .tree-item-content:hover,
+:host(.ic-tree-item-light) ::slotted([slot="router-item"]:hover) {
+  background-color: var(--ic-action-light-bg-hover) !important;
+}
+
+:host(.ic-tree-item-light) .tree-item-content:active,
+:host(.ic-tree-item-light) ::slotted([slot="router-item"]:active) {
+  background-color: var(--ic-action-light-bg-active) !important;
+}
+
 :host(.ic-tree-item-selected) .tree-item-content,
 :host(.ic-tree-item-selected) ::slotted([slot="router-item"]) {
-  background-color: var(--ic-action-default-bg-hover) !important;
+  background-color: var(--ic-action-default-bg-hover);
 }
 
 :host(.ic-tree-item-small) .tree-item-content,
@@ -86,7 +96,7 @@
 :host(.ic-tree-item-disabled) .arrow-dropdown,
 :host(.ic-tree-item-disabled) ::slotted([slot="icon"]),
 :host(.ic-tree-item-disabled) ::slotted([slot="router-item"]) {
-  color: var(--ic-architectural-200) !important;
+  color: var(--ic-architectural-200);
   fill: var(--ic-architectural-200);
   pointer-events: none;
 }
@@ -99,6 +109,15 @@
   fill: var(--ic-architectural-white);
 }
 
+:host(.ic-tree-item-light.ic-tree-item-disabled) .tree-item-content,
+:host(.ic-tree-item-light.ic-tree-item-disabled) .arrow-dropdown,
+:host(.ic-tree-item-light.ic-tree-item-disabled) ::slotted([slot="icon"]),
+:host(.ic-tree-item-light.ic-tree-item-disabled)
+  ::slotted([slot="router-item"]) {
+  color: var(--ic-architectural-300);
+  fill: var(--ic-architectural-300);
+}
+
 :host .arrow-dropdown {
   color: var(--ic-action-default);
   margin-right: var(--ic-space-xs);
@@ -162,6 +181,6 @@
 
   :host(.ic-tree-item-selected) .tree-item-content,
   :host(.ic-tree-item-selected) ::slotted([slot="router-item"]) {
-    color: Highlight !important;
+    color: Highlight;
   }
 }