@ukic/canary-web-components 3.0.0-canary.25 → 3.0.0-canary.27

package/dist/collection/components/ic-data-table/test/a11y/ic-data-table.test.a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table/test/a11y/ic-data-table.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,6CAA6C;AAC7C,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;;;;;;;gBAiBU,CACX,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n// Unable to import from @ukic/web-components\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-data-table\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-data-table></ic-data-table>\n      <script>\n        var dataTable = document.querySelector('ic-data-table');\n        dataTable.columns = [\n            {key: \"name\", title: \"Name\", dataType: \"string\"},\n            {key: \"age\", title: \"Age\", dataType: \"number\"},\n            {key: \"department\", title: \"Department\", dataType: \"string\"},\n            {key: \"employeeNumber\", title: \"Employee number\", dataType: \"number\"}\n        ];\n        dataTable.data = [\n            {name: \"John Smith\", age: 36, department: \"Accounts\", employeeNumber: 1},\n            {name: \"Sally Jones\", age: 32, department: \"Engineering\", employeeNumber: 2},\n            {name: \"Tim Rayes\", age: 41, department: \"Sales\", employeeNumber: 3},\n            {name: \"Luke Fisher\", age: \"23\", department: \"Engineering\", employeeNumber: 4},\n            {name: \"Jane Lock\", age: 34, department: \"Engineering\", employeeNumber: 5},\n            {name: \"Margaret Hale\", age: 45, department: \"HR\", employeeNumber: 6}\n        ];\n      </script>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-data-table.test.a11y.js","sourceRoot":"","sources":["../../../../../../../src/components/ic-data-table/test/a11y/ic-data-table.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,6CAA6C;AAC7C,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB;;;;;;;;;;;;;;;;;gBAiBU,CACX,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\n// Unable to import from @ukic/web-components\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-data-table\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-data-table></ic-data-table>\n      <script>\n        var dataTable = document.querySelector('ic-data-table');\n        dataTable.columns = [\n            {key: \"name\", title: \"Name\", dataType: \"string\"},\n            {key: \"age\", title: \"Age\", dataType: \"number\"},\n            {key: \"department\", title: \"Department\", dataType: \"string\"},\n            {key: \"employeeNumber\", title: \"Employee number\", dataType: \"number\"}\n        ];\n        dataTable.data = [\n            {name: \"John Smith\", age: 36, department: \"Accounts\", employeeNumber: 1},\n            {name: \"Sally Jones\", age: 32, department: \"Engineering\", employeeNumber: 2},\n            {name: \"Tim Rayes\", age: 41, department: \"Sales\", employeeNumber: 3},\n            {name: \"Luke Fisher\", age: \"23\", department: \"Engineering\", employeeNumber: 4},\n            {name: \"Jane Lock\", age: 34, department: \"Engineering\", employeeNumber: 5},\n            {name: \"Margaret Hale\", age: 45, department: \"HR\", employeeNumber: 6}\n        ];\n      </script>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table-title-bar.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcSelectCustomEvent } from \"@ukic/web-components/dist/types/interface\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl?.tagName === \"IC-DATA-TABLE\") {\n      const { caption, density, embedded } = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = density;\n      this.isEmbedded = !!embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = caption;\n      }\n    }\n  }\n\n  private changeDensity = (\n    ev: IcSelectCustomEvent<IcDensityUpdateEventDetail>\n  ) => {\n    this.icTableDensityUpdate.emit({ value: ev.detail.value });\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\" class=\"heading\">\n              <h3>{heading}</h3>\n            </ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    size=\"small\"\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-table-title-bar.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcSelectCustomEvent } from \"@ukic/web-components/dist/types/interface\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl?.tagName === \"IC-DATA-TABLE\") {\n      const { caption, density, embedded } = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = density;\n      this.isEmbedded = !!embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = caption;\n      }\n    }\n  }\n\n  private changeDensity = (\n    ev: IcSelectCustomEvent<IcDensityUpdateEventDetail>\n  ) => {\n    this.icTableDensityUpdate.emit({ value: ev.detail.value });\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\" class=\"heading\">\n              <h3>{heading}</h3>\n            </ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    size=\"small\"\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table-title-bar.stories.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,yBAAyB;IACpC,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;SACb;KACF;CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;8BAEU;IAC5B,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;GAUjB;IACD,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;8BAIU;IAC5B,IAAI,EAAE,+BAA+B;IACrC,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;8BAKU;IAC5B,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;6BAsBS;IAC3B,IAAI,EAAE,gBAAgB;IACtB,MAAM,EAAE,OAAO;CAChB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\n\nexport default {\n  title: \"Web Components/Data Table Title Bar\",\n  component: \"ic-data-table-title-bar\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the data table title bar component to provide titling, description, metadata and also global table functionality.\n *\n * By default, the density selector appears within the data table title bar. The three density options are:\n * - Default\n * - Dense\n * - Spacious\n */\nexport const Basic = {\n  render: () => html`<ic-data-table-title-bar\n    heading=\"Title Bar\"\n  ></ic-data-table-title-bar>`,\n  name: \"Basic\",\n  height: \"220px\",\n};\n\n/**\n * Custom elements can be passed into the areas which contain the title bar heading and description. This flexibility allows the heading tag to be updated if the default heading level (i.e. `h3`) is not semantically correct.\n */\nexport const Slots = {\n  render: () => html`\n    <ic-data-table-title-bar>\n      <ic-typography slot=\"heading\" variant=\"h1\"\n        ><h3>Title Bar</h3></ic-typography\n      >\n      <div slot=\"description\">\n        <ic-chip label=\"Chip\"></ic-chip>\n        <ic-chip label=\"Chip\"></ic-chip>\n      </div>\n    </ic-data-table-title-bar>\n  `,\n  name: \"Slots\",\n  height: \"220px\",\n};\n\n/**\n * Data table metadata and description can be added to the data table title bar via the `metadata` and `description` props.\n */\nexport const MetadataDescriptions = {\n  render: () => html`<ic-data-table-title-bar\n    heading=\"Title Bar\"\n    metadata=\"128 items | 32gb | Updated: 01/02/03\"\n    description=\"Data table description that describes the purpose of the table.\"\n  ></ic-data-table-title-bar>`,\n  name: \"With metadata and description\",\n  height: \"220px\",\n};\n\n/**\n * By default, the density selector is displayed on the data table title bar. To hide it, set `hide-density-select` to `true`.\n */\nexport const HideDensitySelector = {\n  render: () => html`<ic-data-table-title-bar\n    hide-density-select=\"true\"\n    heading=\"Title Bar\"\n    metadata=\"128 items | 32gb | Updated: 01/02/03\"\n    description=\"Data table description that describes the purpose of the table.\"\n  ></ic-data-table-title-bar>`,\n  name: \"Hide density selector\",\n};\n\n/**\n * Custom actions can be added to the data table title bar via slots. There are two slots available:\n * - `primary-action` is suitable for a primary button. The custom element will appear to the right of the data table title bar.\n * - `custom-actions` can be used for secondary actions. The custom element will appear to the left of the density selector if displayed.\n */\nexport const CustomActions = {\n  render: () => html`<ic-data-table-title-bar\n    heading=\"Title Bar\"\n    metadata=\"128 items | 32gb | Updated: 01/02/03\"\n    description=\"Data table description that describes the purpose of the table.\"\n  >\n    <ic-button slot=\"primary-action\" size=\"small\">Primary</ic-button>\n    <ic-button\n      slot=\"custom-actions\"\n      variant=\"icon-tertiary\"\n      aria-label=\"Icon Button\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24\"\n        viewBox=\"0 -960 960 960\"\n        width=\"24\"\n      >\n        <path\n          d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n        />\n      </svg>\n    </ic-button>\n  </ic-data-table-title-bar>`,\n  name: \"Custom actions\",\n  height: \"220px\",\n};\n"]}
+{"version":3,"file":"ic-data-table-title-bar.stories.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.stories.js"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAChC,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qCAAqC;IAC5C,SAAS,EAAE,yBAAyB;IACpC,UAAU,EAAE;QACV,YAAY,EAAE;YACZ,IAAI,EAAE,MAAM;SACb;KACF;CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;8BAEU;IAC5B,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;GAUjB;IACD,IAAI,EAAE,OAAO;IACb,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;8BAIU;IAC5B,IAAI,EAAE,+BAA+B;IACrC,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;8BAKU;IAC5B,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;6BAsBS;IAC3B,IAAI,EAAE,gBAAgB;IACtB,MAAM,EAAE,OAAO;CAChB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\n\nexport default {\n  title: \"Web Components/Data Table Title Bar\",\n  component: \"ic-data-table-title-bar\",\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use the data table title bar component to provide titling, description, metadata and also global table functionality.\n *\n * By default, the density selector appears within the data table title bar. The three density options are:\n * - Default\n * - Dense\n * - Spacious\n */\nexport const Basic = {\n  render: () => html`<ic-data-table-title-bar\n    heading=\"Title Bar\"\n  ></ic-data-table-title-bar>`,\n  name: \"Basic\",\n  height: \"220px\",\n};\n\n/**\n * Custom elements can be passed into the areas which contain the title bar heading and description. This flexibility allows the heading tag to be updated if the default heading level (i.e. `h3`) is not semantically correct.\n */\nexport const Slots = {\n  render: () => html`\n    <ic-data-table-title-bar>\n      <ic-typography slot=\"heading\" variant=\"h1\"\n        ><h3>Title Bar</h3></ic-typography\n      >\n      <div slot=\"description\">\n        <ic-chip label=\"Chip\"></ic-chip>\n        <ic-chip label=\"Chip\"></ic-chip>\n      </div>\n    </ic-data-table-title-bar>\n  `,\n  name: \"Slots\",\n  height: \"220px\",\n};\n\n/**\n * Data table metadata and description can be added to the data table title bar via the `metadata` and `description` props.\n */\nexport const MetadataDescriptions = {\n  render: () => html`<ic-data-table-title-bar\n    heading=\"Title Bar\"\n    metadata=\"128 items | 32gb | Updated: 01/02/03\"\n    description=\"Data table description that describes the purpose of the table.\"\n  ></ic-data-table-title-bar>`,\n  name: \"With metadata and description\",\n  height: \"220px\",\n};\n\n/**\n * By default, the density selector is displayed on the data table title bar. To hide it, set `hide-density-select` to `true`.\n */\nexport const HideDensitySelector = {\n  render: () => html`<ic-data-table-title-bar\n    hide-density-select=\"true\"\n    heading=\"Title Bar\"\n    metadata=\"128 items | 32gb | Updated: 01/02/03\"\n    description=\"Data table description that describes the purpose of the table.\"\n  ></ic-data-table-title-bar>`,\n  name: \"Hide density selector\",\n};\n\n/**\n * Custom actions can be added to the data table title bar via slots. There are two slots available:\n * - `primary-action` is suitable for a primary button. The custom element will appear to the right of the data table title bar.\n * - `custom-actions` can be used for secondary actions. The custom element will appear to the left of the density selector if displayed.\n */\nexport const CustomActions = {\n  render: () => html`<ic-data-table-title-bar\n    heading=\"Title Bar\"\n    metadata=\"128 items | 32gb | Updated: 01/02/03\"\n    description=\"Data table description that describes the purpose of the table.\"\n  >\n    <ic-button slot=\"primary-action\" size=\"small\">Primary</ic-button>\n    <ic-button\n      slot=\"custom-actions\"\n      variant=\"icon-tertiary\"\n      aria-label=\"Icon Button\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24\"\n        viewBox=\"0 -960 960 960\"\n        width=\"24\"\n      >\n        <path\n          d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n        />\n      </svg>\n    </ic-button>\n  </ic-data-table-title-bar>`,\n  name: \"Custom actions\",\n  height: \"220px\",\n};\n"]}

package/dist/collection/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table-title-bar.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,yGAAyG,CAC1G,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-data-table-title-bar\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-data-table-title-bar heading=\"header\" description=\"desc\" metadata=\"meta\"></ic-data-table-title-bar>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-data-table-title-bar.test.a11y.js","sourceRoot":"","sources":["../../../../../../../src/components/ic-data-table-title-bar/test/a11y/ic-data-table-title-bar.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,yGAAyG,CAC1G,CAAC;QACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-data-table-title-bar\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-data-table-title-bar heading=\"header\" description=\"desc\" metadata=\"meta\"></ic-data-table-title-bar>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-date-input/ic-date-input.css

@@ -623,3 +623,9 @@ ic-input-validation {
   --ic-input-validation-warning-icon-color: var(--ic-date-input-icon-warning);
   --ic-input-validation-success-icon-color: var(--ic-date-input-icon-success);
 }
+
+@media (forced-colors: active) {
+  .clear-button svg {
+    color: currentcolor;
+  }
+}

package/dist/collection/components/ic-date-input/ic-date-input.js

@@ -619,9 +619,9 @@ export class DateInput {
         // Get input based on letter representing each date part ("D", "M" or "Y")
         // (retrieved from dateFormat)
         this.getInputFromDatePart = (datePart) => {
-            const dayInput = (h("input", { class: "day-input", id: "day-input", ref: (el) => (this.dayInputEl = el), "aria-label": "day", placeholder: "DD", disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventDayInput) }));
-            const monthInput = (h("input", { id: "month-input", class: "month-input", ref: (el) => (this.monthInputEl = el), "aria-label": "month", placeholder: "MM", disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventMonthInput) }));
-            const yearInput = (h("input", { id: "year-input", class: "year-input", ref: (el) => (this.yearInputEl = el), "aria-label": "year", placeholder: "YYYY", maxLength: 4, disabled: this.disabled, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventYearInput) }));
+            const dayInput = (h("input", { class: "day-input", id: "day-input", ref: (el) => (this.dayInputEl = el), "aria-label": "day", placeholder: "DD", disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventDayInput) }));
+            const monthInput = (h("input", { id: "month-input", class: "month-input", ref: (el) => (this.monthInputEl = el), "aria-label": "month", placeholder: "MM", disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventMonthInput) }));
+            const yearInput = (h("input", { id: "year-input", class: "year-input", ref: (el) => (this.yearInputEl = el), "aria-label": "year", placeholder: "YYYY", maxLength: 4, disabled: this.disabled, "aria-required": `${this.required}`, onPaste: this.handlePaste, inputmode: "number", pattern: "[0-9]*", onKeyDown: (event) => this.handleKeyDown(event, this.preventYearInput) }));
             let input;
             switch (datePart) {
                 case "D":
@@ -1172,15 +1172,15 @@ export class DateInput {
                 : "";
         const assistiveHint = `Type or use the up and down arrow keys to change the values for the ${this.getDescOfInputsOrder()}.`;
         renderHiddenInput(true, this.el, this.name, this.convertToDate(this.year, this.month, this.day), this.disabled);
-        return (h(Host, { key: '767560eabf5c5242cf11ead943b6e07cff501305', class: {
+        return (h(Host, { key: '7ced152386fffdfcd023d8ded5a0eb1733c7013a', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-date-input-disabled`]: disabled,
-            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: 'cd37bd9a48a9f578cdf5b3f5a03bba04e4a502d5', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '0bdb602306aa1177106759da5f977f36869a51e1', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: '3eba48de2044efaaba63c31474597c88906cf0e7', name: "helper-text", slot: "helper-text" }))), h("span", { key: '4395cbcc455b0535a1dc51a17d43d2056894558c', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '2832552e06bf18c157e4b89240603c66e97d2bd7', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: '96ea3a7bb98dec9d217c9abfde2fffe29fd8b10b', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '239191d8b0d2f732fab91303a283d4592a6a8cbc', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: 'b11b5d3a989391a0960b29ca54e78f9de1e41f97', class: "input-container" }, h("div", { key: '2e4106d33ee3b1ef5cf89cb61ac38f15c792a601', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '8da9c7b8ca40a1bba9a714de24ae33e540ed91d0', class: "action-buttons" }, showClearButton && (h("ic-button", { key: '2a7a675746e26ffdd4a6d43f4fdd268b9425f81f', id: "clear-button", "aria-label": "Clear input", class: {
+            }, onBlur: this.handleHostBlur, onFocus: this.handleHostFocus }, h("ic-input-container", { key: 'bb80b694e3f38978c21b7fb5ae1e78f79b35dc3c', disabled: disabled }, !(hideLabel && hideHelperText) && (h("ic-input-label", { key: '0e8dfb49234774f38e9a64d65c1b3d23f3622d4d', for: inputId, label: label, hideLabel: hideLabel, helperText: !hideHelperText ? helperText : "", disabled: disabled }, h("slot", { key: '56f0e54039017b907b4b6260ee6aa6195d762cab', name: "helper-text", slot: "helper-text" }))), h("span", { key: 'e27f938ef389962dbf35bfd5ff1a6f73744aaabb', id: this.screenReaderInfoId, class: "sr-only", "aria-hidden": "true" }, this.getScreenReaderInfo(validationStatus), hideLabel && `${label}\n`, hideHelperText && `${helperText}\n`, `${this.defaultHelperText}.`), h("span", { key: '2718994db39d6cff9e2ac49c761fe104afd700ca', id: this.assistiveHintId, class: "sr-only", "aria-hidden": "true" }, assistiveHint), h("span", { key: 'dd0e46f647f57f431f5f7a04c1d9bc1e8fa5c279', id: "live-region", "aria-live": "assertive", class: "sr-only" }), h("ic-input-component-container", { key: '8b795ce5a1c2c5b30ad3388630595db355e7f6bf', id: inputId, ref: (el) => (this.inputCompContainerEl = el), disabled: disabled, validationStatus: validationStatus, size: size, role: "group", class: { [`ic-theme-${theme}`]: theme !== "inherit" } }, h("div", { key: '7a07353e1b7e8076cb39b5b73793f2b70b0db040', class: "input-container" }, h("div", { key: '9e257683e556c73e68f51c8e41b10e9e30cd8156', class: "date-inputs" }, this.getInputsInOrder()[0], "/", this.getInputsInOrder()[1], "/", this.getInputsInOrder()[2]), h("div", { key: '8c9cd028d27861f195933c6ef09ce79f367686fd', class: "action-buttons" }, showClearButton && (h("ic-button", { key: 'fcee2b92276a3598787d63ded0529973b8eb2eda', id: "clear-button", "aria-label": "Clear input", class: {
                 ["clear-button"]: true,
                 ["hidden"]: isEmptyString(this.day) &&
                     isEmptyString(this.month) &&
                     isEmptyString(this.year),
-            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { key: '1a402f80e4ebfdb1e323b159dc2f93e412f84ff2', class: "show-calendar-button-wrapper" }, h("div", { key: '1a93e892a8808109e93eb94ecee6639f930e78ac', class: { divider: true, [size]: true } }), h("ic-button", { key: '0a4a5c7d2fd886be631ad052d02175c05900a814', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), h("span", { key: 'c3db6318bf5b2759c708d07d0b5e446d35702f38', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '6a682bf4c118014e15709e3d7099f9346a41d1a5', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: '90d5948c97133f9c1028016a20bc8b09542de88c', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
+            }, disabled: this.disabled, innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearFocus, onBlur: this.handleClearBlur, variant: "icon-tertiary", theme: this.clearButtonFocused ? "light" : "dark", size: size })), showCalendarButton && (h("div", { key: '47d6e339e971c24a87395b0b390e40be984292b4', class: "show-calendar-button-wrapper" }, h("div", { key: '074366deea600d279257945e9710b95922d909dc', class: { divider: true, [size]: true } }), h("ic-button", { key: 'ee6c418309f9140dc2e313e42c0c754d5118a438', id: "calendar-button", ref: (el) => (this.calendarButtonEl = el), "aria-label": "Display calendar", "aria-haspopup": "dialog", class: "calendar-button", disabled: this.disabled, innerHTML: Calendar, onClick: this.handleCalendarOpen, variant: "icon-tertiary", size: size, onFocus: this.handleCalendarFocus, onBlur: this.handleCalendarBlur, theme: this.calendarFocused ? "light" : "dark" })))))), h("span", { key: 'c1cd23d1c568cce687afa77170fb054ab9938503', id: this.selectedDateInfoId, class: "sr-only", "aria-live": "polite" }, h("span", { key: '9475acd6262f0e78a9c390caf200c7b5af1d1036', ref: (el) => (this.selectedDateInfoEl = el), role: "status" })), (hasCustomValidation || !isEmptyString(this.invalidDateText)) && (h("ic-input-validation", { key: 'f1a1da7f67bd2d63b77bc18f284b31ba1f24628a', status: validationStatus, message: hasCustomValidation ? this.validationText : this.invalidDateText, for: inputId })))));
     }
     static get is() { return "ic-date-input"; }
     static get encapsulation() { return "shadow"; }