@ukic/canary-web-components 2.0.0-canary.0

package/dist/components/ic-page-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcPageHeader extends Components.IcPageHeader, HTMLElement {}
+export const IcPageHeader: {
+  prototype: IcPageHeader;
+  new (): IcPageHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-page-header.js

@@ -0,0 +1,166 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as isSlotUsed, d as getCurrentDeviceSize, D as DEVICE_SIZES, c as checkResizeObserver } from './helpers.js';
+import { d as defineCustomElement$7 } from './ic-button2.js';
+import { d as defineCustomElement$6 } from './ic-horizontal-scroll2.js';
+import { d as defineCustomElement$5 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$4 } from './ic-section-container2.js';
+import { d as defineCustomElement$3 } from './ic-tooltip2.js';
+import { d as defineCustomElement$2 } from './ic-typography2.js';
+
+const icPageHeaderCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;z-index:var(--ic-z-index-page-header)}:host(.sticky){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay);z-index:var(--ic-z-index-sticky-page-header)}header{background-color:var(--ic-architectural-40)}header.border-bottom{border-bottom:var(--ic-border-default)}header.tabs{padding-top:var(--ic-space-md)}.breadcrumb-area{margin-bottom:var(--ic-space-md)}.main-content{display:grid;grid-template-columns:auto 1fr;grid-template-areas:\"title-area action-area\"\n    \"input-area action-area\";-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md);justify-content:space-between;width:100%}.title-area{display:flex;flex-direction:column;flex:1;min-width:19rem;grid-area:title-area}.header-content{display:flex;align-items:center;width:100%;flex-wrap:wrap;row-gap:var(--ic-space-xs);-moz-column-gap:var(--ic-space-md);column-gap:var(--ic-space-md)}.heading{display:inline-block;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.subheading.small{margin-top:var(--ic-space-xs)}.action-area{display:flex;gap:var(--ic-space-md);flex-flow:row wrap;justify-self:end;justify-content:flex-end;height:-moz-fit-content;height:fit-content;grid-area:action-area}.input-area,.navigation-area{margin-top:var(--ic-space-md);width:100%}.tabs-slot{display:flex;overflow-x:auto;padding:0.5rem;margin:-0.5rem}.tabs-slot::-webkit-scrollbar{display:none}.input-area{grid-area:input-area}@media screen and (max-width: 576px){::slotted(ic-text-field){--input-width:100%;max-width:20rem}.main-content{grid-template-areas:\"title-area\"\n      \"action-area\"\n      \"input-area\";justify-content:flex-start}.title-area{min-width:0}.action-area{min-width:100%;margin-top:var(--ic-space-md);justify-content:start}}@media screen and (min-width: 992px){:host(.sticky-desktop){position:sticky;top:0;box-shadow:var(--ic-elevation-overlay);z-index:var(--ic-z-index-sticky-page-header)}}";
+
+const PageHeader = /*@__PURE__*/ proxyCustomElement(class PageHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.resizeObserver = null;
+    this.resizeObserverCallback = () => {
+      if (this.reverseOrder && isSlotUsed(this.el, "actions")) {
+        this.applyReverseOrder();
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.resizeObserverCallback();
+      });
+      this.resizeObserver.observe(this.el);
+    };
+    this.applyReverseOrder = () => {
+      const currSize = getCurrentDeviceSize();
+      if (currSize !== this.deviceSize) {
+        this.deviceSize = currSize;
+      }
+      const actionArea = this.el.shadowRoot.querySelector("div.action-area");
+      const actionHeights = [];
+      /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */
+      for (let i = 0; i < this.actionContent.length; i++) {
+        const action = this.actionContent[i];
+        let actionHeight = action.offsetHeight;
+        if (actionHeight === undefined) {
+          actionHeight = 0;
+        }
+        actionHeights.push(actionHeight);
+      }
+      const max = Math.max(...actionHeights);
+      /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */
+      let actionAreaHeight = actionArea.offsetHeight;
+      if (actionAreaHeight === undefined) {
+        actionAreaHeight = 0;
+      }
+      const appendActionContent = () => {
+        this.actionContent = this.actionContent.reverse();
+        this.actionContent.forEach((btn) => {
+          this.el.append(btn);
+        });
+        this.areButtonsReversed = !this.areButtonsReversed;
+      };
+      if ((this.deviceSize > DEVICE_SIZES.S &&
+        actionAreaHeight <= max &&
+        !this.areButtonsReversed) ||
+        (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||
+          this.deviceSize <= DEVICE_SIZES.S) &&
+          this.areButtonsReversed)) {
+        appendActionContent();
+      }
+    };
+    this.actionContent = undefined;
+    this.areButtonsReversed = false;
+    this.deviceSize = DEVICE_SIZES.XL;
+    this.aligned = "left";
+    this.border = true;
+    this.heading = undefined;
+    this.reverseOrder = false;
+    this.small = false;
+    this.sticky = false;
+    this.stickyDesktopOnly = false;
+    this.subheading = undefined;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    this.actionContent = Array.from(this.el.querySelectorAll(`[slot="actions"]`));
+  }
+  componentDidLoad() {
+    checkResizeObserver(this.runResizeObserver);
+  }
+  render() {
+    const { small, border, heading, subheading, aligned, sticky, stickyDesktopOnly, } = this;
+    return (h(Host, { class: {
+        ["sticky"]: sticky,
+        ["sticky-desktop"]: !sticky && stickyDesktopOnly,
+      } }, h("header", { class: {
+        ["border-bottom"]: border,
+        ["tabs"]: isSlotUsed(this.el, "tabs"),
+      } }, h("ic-section-container", { aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { class: "breadcrumb-area" }, h("slot", { name: "breadcrumbs" }))), h("div", { class: "main-content" }, h("div", { class: "title-area" }, h("div", { class: "header-content" }, h("slot", { name: "heading" }, h("ic-typography", { variant: small ? "h4" : "h2", class: "heading" }, h("h2", null, heading))), h("slot", { name: "heading-adornment" })), h("div", null, h("slot", { name: "subheading" }, subheading && (h("ic-typography", { variant: "body", class: { ["subheading"]: true, ["small"]: small } }, subheading))))), isSlotUsed(this.el, "actions") && (h("div", { class: "action-area" }, h("slot", { name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { class: "input-area" }, h("slot", { name: "input" })))), (isSlotUsed(this.el, "stepper") ||
+      isSlotUsed(this.el, "tabs")) && (h("div", { class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
+      !isSlotUsed(this.el, "tabs") && h("slot", { name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { "aria-label": "navigation-landmark-page-header" }, h("ic-horizontal-scroll", null, h("ul", { class: "tabs-slot" }, h("slot", { name: "tabs" })))))))))));
+  }
+  get el() { return this; }
+  static get style() { return icPageHeaderCss; }
+}, [1, "ic-page-header", {
+    "aligned": [1],
+    "border": [4],
+    "heading": [1],
+    "reverseOrder": [4, "reverse-order"],
+    "small": [4],
+    "sticky": [4],
+    "stickyDesktopOnly": [4, "sticky-desktop-only"],
+    "subheading": [1],
+    "actionContent": [32],
+    "areButtonsReversed": [32],
+    "deviceSize": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-page-header", "ic-button", "ic-horizontal-scroll", "ic-loading-indicator", "ic-section-container", "ic-tooltip", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-page-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PageHeader);
+      }
+      break;
+    case "ic-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ic-horizontal-scroll":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ic-section-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ic-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IcPageHeader = PageHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcPageHeader, defineCustomElement };
+
+//# sourceMappingURL=ic-page-header.js.map

package/dist/components/ic-page-header.js.map

@@ -0,0 +1 @@
+{"file":"ic-page-header.js","mappings":"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","names":[],"sources":["./src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","./src/components/ic-page-header/ic-page-header.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --ic-z-index-page-header: z-index of page-header\n */\n\n:host {\n  display: block;\n  z-index: var(--ic-z-index-page-header);\n}\n\n:host(.sticky) {\n  position: sticky;\n  top: 0;\n  box-shadow: var(--ic-elevation-overlay);\n  z-index: var(--ic-z-index-sticky-page-header);\n}\n\nheader {\n  background-color: var(--ic-architectural-40);\n}\n\nheader.border-bottom {\n  border-bottom: var(--ic-border-default);\n}\n\nheader.tabs {\n  padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n  margin-bottom: var(--ic-space-md);\n}\n\n.main-content {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  grid-template-areas:\n    \"title-area action-area\"\n    \"input-area action-area\";\n  column-gap: var(--ic-space-md);\n  justify-content: space-between;\n  width: 100%;\n}\n\n.title-area {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 19rem;\n  grid-area: title-area;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-wrap: wrap;\n  row-gap: var(--ic-space-xs);\n  column-gap: var(--ic-space-md);\n}\n\n.heading {\n  display: inline-block;\n  overflow-wrap: break-word;\n  hyphens: auto;\n}\n\n.subheading.small {\n  margin-top: var(--ic-space-xs);\n}\n\n.action-area {\n  display: flex;\n  gap: var(--ic-space-md);\n  flex-flow: row wrap;\n  justify-self: end;\n  justify-content: flex-end;\n  height: fit-content;\n  grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n  margin-top: var(--ic-space-md);\n  width: 100%;\n}\n\n.tabs-slot {\n  display: flex;\n  overflow-x: auto;\n  padding: 0.5rem;\n  margin: -0.5rem;\n}\n\n.tabs-slot::-webkit-scrollbar {\n  display: none;\n}\n\n.input-area {\n  grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n\n    max-width: 20rem;\n  }\n\n  .main-content {\n    grid-template-areas:\n      \"title-area\"\n      \"action-area\"\n      \"input-area\";\n    justify-content: flex-start;\n  }\n\n  .title-area {\n    min-width: 0;\n  }\n\n  .action-area {\n    min-width: 100%;\n    margin-top: var(--ic-space-md);\n    justify-content: start;\n  }\n}\n\n@media screen and (min-width: 992px) {\n  :host(.sticky-desktop) {\n    position: sticky;\n    top: 0;\n    box-shadow: var(--ic-elevation-overlay);\n    z-index: var(--ic-z-index-sticky-page-header);\n  }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment } from \"../../utils/types\";\n\nimport {\n  isSlotUsed,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/**\n * @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n */\n\n@Component({\n  tag: \"ic-page-header\",\n  styleUrl: \"ic-page-header.css\",\n  shadow: true,\n})\nexport class PageHeader {\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcPageHeaderElement;\n\n  @State() actionContent: Node[];\n  @State() areButtonsReversed: boolean = false;\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  /**\n   * The alignment of the page header.\n   */\n  @Prop() aligned?: IcAlignment = \"left\";\n\n  /**\n   * If `true`, a border will be displayed along the bottom of the page header.\n   */\n  @Prop() border?: boolean = true;\n\n  /**\n   * The title to render on the page header.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n   */\n  @Prop() reverseOrder?: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the page header.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * If `true`, the page header will be sticky at all breakpoints.\n   */\n  @Prop() sticky?: boolean = false;\n\n  /**\n   *  If `true`, the page header will only be sticky for viewport widths of 992px and above.\n   */\n  @Prop() stickyDesktopOnly?: boolean = false;\n\n  /**\n   * The subtitle to render on the page header.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.actionContent = Array.from(\n      this.el.querySelectorAll(`[slot=\"actions\"]`)\n    );\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n      this.applyReverseOrder();\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.el);\n  };\n\n  private applyReverseOrder = (): void => {\n    const currSize = getCurrentDeviceSize();\n    if (currSize !== this.deviceSize) {\n      this.deviceSize = currSize;\n    }\n\n    const actionArea = this.el.shadowRoot.querySelector(\n      \"div.action-area\"\n    ) as HTMLElement;\n    const actionHeights: number[] = [];\n\n    /* For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) */\n    for (let i = 0; i < this.actionContent.length; i++) {\n      const action = this.actionContent[i] as HTMLElement;\n      let actionHeight = action.offsetHeight;\n      if (actionHeight === undefined) {\n        actionHeight = 0;\n      }\n      actionHeights.push(actionHeight);\n    }\n\n    const max = Math.max(...actionHeights);\n\n    /* The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoiint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n    let actionAreaHeight = actionArea.offsetHeight;\n\n    if (actionAreaHeight === undefined) {\n      actionAreaHeight = 0;\n    }\n\n    const appendActionContent = () => {\n      this.actionContent = this.actionContent.reverse();\n      this.actionContent.forEach((btn: string | Node) => {\n        this.el.append(btn);\n      });\n      this.areButtonsReversed = !this.areButtonsReversed;\n    };\n\n    if (\n      (this.deviceSize > DEVICE_SIZES.S &&\n        actionAreaHeight <= max &&\n        !this.areButtonsReversed) ||\n      (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) ||\n        this.deviceSize <= DEVICE_SIZES.S) &&\n        this.areButtonsReversed)\n    ) {\n      appendActionContent();\n    }\n  };\n\n  render() {\n    const {\n      small,\n      border,\n      heading,\n      subheading,\n      aligned,\n      sticky,\n      stickyDesktopOnly,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"sticky\"]: sticky,\n          [\"sticky-desktop\"]: !sticky && stickyDesktopOnly,\n        }}\n      >\n        <header\n          class={{\n            [\"border-bottom\"]: border,\n            [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n          }}\n        >\n          <ic-section-container\n            aligned={aligned}\n            fullHeight={isSlotUsed(this.el, \"tabs\")}\n          >\n            {isSlotUsed(this.el, \"breadcrumbs\") && (\n              <div class=\"breadcrumb-area\">\n                <slot name=\"breadcrumbs\" />\n              </div>\n            )}\n            <div class=\"main-content\">\n              <div class=\"title-area\">\n                <div class=\"header-content\">\n                  <slot name=\"heading\">\n                    <ic-typography\n                      variant={small ? \"h4\" : \"h2\"}\n                      class=\"heading\"\n                    >\n                      <h2>{heading}</h2>\n                    </ic-typography>\n                  </slot>\n                  <slot name=\"heading-adornment\" />\n                </div>\n                <div>\n                  <slot name=\"subheading\">\n                    {subheading && (\n                      <ic-typography\n                        variant=\"body\"\n                        class={{ [\"subheading\"]: true, [\"small\"]: small }}\n                      >\n                        {subheading}\n                      </ic-typography>\n                    )}\n                  </slot>\n                </div>\n              </div>\n              {isSlotUsed(this.el, \"actions\") && (\n                <div class=\"action-area\">\n                  <slot name=\"actions\" />\n                </div>\n              )}\n              {isSlotUsed(this.el, \"input\") && (\n                <div class=\"input-area\">\n                  <slot name=\"input\" />\n                </div>\n              )}\n            </div>\n\n            {(isSlotUsed(this.el, \"stepper\") ||\n              isSlotUsed(this.el, \"tabs\")) && (\n              <div class=\"navigation-area\">\n                {isSlotUsed(this.el, \"stepper\") &&\n                  !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n                {isSlotUsed(this.el, \"tabs\") && (\n                  <nav aria-label=\"navigation-landmark-page-header\">\n                    <ic-horizontal-scroll>\n                      <ul class=\"tabs-slot\">\n                        <slot name=\"tabs\" />\n                      </ul>\n                    </ic-horizontal-scroll>\n                  </nav>\n                )}\n              </div>\n            )}\n          </ic-section-container>\n        </header>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-pagination-bar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IcPaginationBar extends Components.IcPaginationBar, HTMLElement {}
+export const IcPaginationBar: {
+  prototype: IcPaginationBar;
+  new (): IcPaginationBar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ic-pagination-bar.js

@@ -0,0 +1,8 @@
+import { P as PaginationBar, d as defineCustomElement$1 } from './ic-pagination-bar2.js';
+
+const IcPaginationBar = PaginationBar;
+const defineCustomElement = defineCustomElement$1;
+
+export { IcPaginationBar, defineCustomElement };
+
+//# sourceMappingURL=ic-pagination-bar.js.map

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

@@ -0,0 +1 @@
+{"file":"ic-pagination-bar.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ic-pagination-bar2.js

@@ -0,0 +1,378 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as checkResizeObserver } from './helpers.js';
+import { d as defineCustomElement$d } from './ic-button2.js';
+import { d as defineCustomElement$c } from './ic-input-component-container2.js';
+import { d as defineCustomElement$b } from './ic-input-container2.js';
+import { d as defineCustomElement$a } from './ic-input-label2.js';
+import { d as defineCustomElement$9 } from './ic-input-validation2.js';
+import { d as defineCustomElement$8 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$7 } from './ic-menu2.js';
+import { d as defineCustomElement$6 } from './ic-pagination2.js';
+import { d as defineCustomElement$5 } from './ic-pagination-item2.js';
+import { d as defineCustomElement$4 } from './ic-select2.js';
+import { d as defineCustomElement$3 } from './ic-text-field2.js';
+import { d as defineCustomElement$2 } from './ic-tooltip2.js';
+import { d as defineCustomElement$1 } from './ic-typography2.js';
+
+const icPaginationBarCss = ":host(){display:block}.pagination-bar{height:3.5rem;display:flex;align-items:center;justify-content:flex-end;gap:var(--ic-space-xl);padding:var(--ic-space-xs) var(--ic-space-md);box-sizing:border-box}.pagination-bar-left{justify-content:flex-start}.item-controls{display:flex;align-items:center;gap:var(--ic-space-xl)}.pagination-bar-space-between .item-controls{margin-right:auto}.items-per-page-holder{display:flex;align-items:center;gap:var(--ic-space-xs)}.items-per-page-input{--input-width:5rem}.pagination-controls{display:flex;align-items:center;gap:var(--ic-space-xl)}.pagination-controls-wrap{flex-direction:column;align-items:flex-end;gap:var(--ic-space-xs)}.pagination-bar-space-between .pagination-controls{margin-left:auto}.go-to-page-holder{display:flex;align-items:center;gap:var(--ic-space-xs)}.go-to-page-input{--input-width:var(--ic-space-xl)}.go-to-page-button{--min-width:var(--ic-space-xl)}.pagination-text-default,.pagination-text-dark,.pagination-text-light{white-space:nowrap}.pagination-text-light{color:var(--ic-color-white-text)}@media screen and (max-width: 768px){.pagination-bar{flex-direction:column;align-items:flex-end;height:-moz-fit-content;height:fit-content;gap:var(--ic-space-xs)}.pagination-bar-left{align-items:flex-start}}@media screen and (max-width: 320px){.item-controls,.pagination-controls{flex-direction:column;align-items:flex-end;gap:var(--ic-space-xs)}.pagination-bar-left .item-controls,.pagination-bar-left .pagination-controls,.pagination-bar-space-between .item-controls,.pagination-bar-space-between .pagination-controls{align-items:flex-start}}";
+
+const PaginationBar = /*@__PURE__*/ proxyCustomElement(class PaginationBar extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.icPageChange = createEvent(this, "icPageChange", 7);
+    this.icItemsPerPageChange = createEvent(this, "icItemsPerPageChange", 7);
+    this.PAGINATION = "ic-pagination";
+    this.TEXT_FIELD = "ic-text-field";
+    this.TOOLTIP = "ic-tooltip";
+    this.PAGE_INPUT_FIELD_ID = "go-to-page-input";
+    this.INVALID_PAGE_ERROR = "Please enter a valid page";
+    this.NAN_ERROR = "Please enter a number";
+    this.resizeObserver = null;
+    this.changeItemsPerPage = () => {
+      const select = this.el.shadowRoot.querySelector("ic-select");
+      const value = select.value;
+      this.itemsPerPage = value;
+      this.setNumberPages();
+      this.setUpperBound();
+      const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
+      if (this.currentPage > this.totalPages) {
+        pagination.setCurrentPage(this.totalPages);
+        this.currentPage = this.totalPages;
+      }
+      this.icItemsPerPageChange.emit({ value: Number(this.itemsPerPage) });
+      this.icPageChange.emit({ value: this.currentPage });
+    };
+    this.changePage = (page) => {
+      this.currentPage = page;
+      this.lowerBound =
+        page !== 1 ? (page - 1) * Number(this.itemsPerPage) + 1 : page;
+      this.setUpperBound();
+    };
+    this.goToPage = () => {
+      const input = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+      const page = Number(input.value);
+      const tooltip = this.el.shadowRoot.querySelector("ic-tooltip");
+      if (page <= this.totalPages && page > 0) {
+        this.changePage(page);
+        const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
+        pagination.setCurrentPage(page);
+        this.currentPage = page;
+        input.value = "";
+        this.icPageChange.emit({ value: page });
+        tooltip.displayTooltip(false, false);
+        input.validationStatus = "";
+      }
+      else {
+        this.inputError = this.INVALID_PAGE_ERROR;
+        input.validationStatus = "error";
+        input.setFocus();
+      }
+    };
+    this.handleBlur = () => {
+      var _a, _b;
+      const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.TEXT_FIELD);
+      const tooltip = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.TOOLTIP);
+      if ((Number(textField.value) <= this.totalPages &&
+        Number(textField.value) > 0) ||
+        textField.value === "") {
+        textField.validationStatus = "";
+      }
+      tooltip.displayTooltip(false, false);
+    };
+    this.handleFocus = () => {
+      var _a, _b;
+      const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.TEXT_FIELD);
+      const tooltip = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(this.TOOLTIP);
+      if (textField.validationStatus === "error") {
+        tooltip.displayTooltip(true, true);
+      }
+    };
+    this.handleInputChange = () => {
+      const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
+      const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+      const inputValue = parseInt(textField.value);
+      if (inputValue > this.totalPages || inputValue <= 0) {
+        this.inputError = this.INVALID_PAGE_ERROR;
+        tooltip.displayTooltip(true, true);
+        textField.validationStatus = "error";
+        textField.focus();
+      }
+    };
+    this.handleKeydown = (ev) => {
+      const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
+      const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+      if (ev.key === "Enter") {
+        if (textField.validationStatus === "error") {
+          tooltip.displayTooltip(true, true);
+        }
+        else {
+          this.goToPage();
+        }
+      }
+      else {
+        tooltip.displayTooltip(false, false);
+        textField.validationStatus = "";
+      }
+    };
+    this.handleKeyUp = (ev) => {
+      const tooltip = this.el.shadowRoot.querySelector(this.TOOLTIP);
+      const textField = this.el.shadowRoot.querySelector(this.TEXT_FIELD);
+      const inputValue = parseInt(textField.value);
+      if (Number.isNaN(inputValue) &&
+        ev.key !== "Backspace" &&
+        ev.key !== "Enter" &&
+        ev.key !== "Tab" &&
+        ev.key !== "Shift") {
+        this.inputError = this.NAN_ERROR;
+        tooltip.displayTooltip(true, false);
+        textField.validationStatus = "error";
+      }
+    };
+    this.paginationShouldWrap = () => {
+      const pagination = this.el.shadowRoot.querySelector(this.PAGINATION);
+      if (this.paginationControl === "simple") {
+        if (pagination.clientHeight > 63) {
+          this.paginationWrapped = true;
+        }
+        else {
+          this.paginationWrapped = false;
+        }
+      }
+    };
+    this.resizeObserverCallback = (currSize) => {
+      if (currSize - this.paginationWidth > 50 ||
+        currSize - this.paginationWidth < -50) {
+        this.paginationWidth = currSize;
+        this.paginationShouldWrap();
+      }
+    };
+    this.runResizeObserver = () => {
+      this.resizeObserver = new ResizeObserver(() => {
+        const currSize = this.paginationBarEl.clientWidth;
+        this.resizeObserverCallback(currSize);
+      });
+      this.resizeObserver.observe(this.paginationBarEl);
+    };
+    this.setDefaultItemsPerPage = () => {
+      this.itemsPerPage = this.itemsPerPageOptions[0].value;
+    };
+    this.setDefaultItemsPerPageOptions = () => {
+      this.itemsPerPageOptions =
+        this.totalItems <= 100
+          ? [
+            { label: "10", value: "10" },
+            { label: "25", value: "25" },
+            { label: "50", value: "50" },
+            { label: "All", value: String(this.totalItems) },
+          ]
+          : [
+            { label: "25", value: "25" },
+            { label: "100", value: "100" },
+            { label: "1000", value: "1000" },
+            { label: "All", value: String(this.totalItems) },
+          ];
+    };
+    this.setGoToPageInputStyles = () => {
+      var _a, _b;
+      const textField = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.${this.PAGE_INPUT_FIELD_ID}`);
+      if (textField !== undefined) {
+        const input = (_b = textField === null || textField === void 0 ? void 0 : textField.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("input");
+        if (input !== undefined) {
+          input.style.textAlign = "center";
+          input.style.padding = "0";
+        }
+      }
+    };
+    this.setNumberPages = () => {
+      this.totalPages = Math.ceil(this.totalItems / Number(this.itemsPerPage));
+    };
+    this.setUpperBound = () => {
+      this.upperBound = Math.min(this.lowerBound + Number(this.itemsPerPage) - 1, this.totalItems);
+    };
+    this.trimItemsPerPageOptions = () => {
+      this.itemsPerPageOptions = this.itemsPerPageOptions.slice(0, 3);
+      this.itemsPerPageOptions.push({
+        label: "All",
+        value: String(this.totalItems),
+      });
+      for (let i = 0; i < this.itemsPerPageOptions.length - 1; i++) {
+        if (this.totalItems <= Number(this.itemsPerPageOptions[i].value)) {
+          this.itemsPerPageOptions.splice(i, this.itemsPerPageOptions.length - (i + 1));
+        }
+      }
+    };
+    this.currentPage = 1;
+    this.inputError = "Please enter a valid page";
+    this.itemsPerPage = undefined;
+    this.lowerBound = 1;
+    this.paginationWidth = undefined;
+    this.paginationWrapped = false;
+    this.totalPages = undefined;
+    this.upperBound = undefined;
+    this.alignment = "right";
+    this.appearance = "default";
+    this.itemLabel = "Item";
+    this.itemsPerPageOptions = undefined;
+    this.paginationControl = "simple";
+    this.paginationType = "page";
+    this.pageLabel = "Page";
+    this.showGoToPageControl = false;
+    this.showItemsPerPage = true;
+    this.showItemsPerPageControl = false;
+    this.totalItems = undefined;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver !== null) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  componentWillLoad() {
+    if (this.itemsPerPageOptions === undefined ||
+      this.itemsPerPageOptions === null) {
+      this.setDefaultItemsPerPageOptions();
+    }
+    this.trimItemsPerPageOptions();
+    this.setDefaultItemsPerPage();
+    this.setNumberPages();
+    this.setUpperBound();
+  }
+  componentDidLoad() {
+    this.paginationWidth = this.paginationBarEl.clientWidth;
+    checkResizeObserver(this.runResizeObserver);
+    this.setGoToPageInputStyles();
+    this.paginationShouldWrap();
+  }
+  pageChangeHandler(ev) {
+    const page = ev.detail.value;
+    this.changePage(page);
+  }
+  render() {
+    const { appearance, alignment, itemsPerPageOptions, PAGE_INPUT_FIELD_ID, paginationControl, paginationType, showItemsPerPage, showItemsPerPageControl, showGoToPageControl, } = this;
+    const focusElFromLabel = (el) => {
+      var _a;
+      (_a = this.paginationBarEl.querySelector(el)) === null || _a === void 0 ? void 0 : _a.setFocus();
+    };
+    return (h("div", { class: {
+        ["pagination-bar"]: true,
+        [`pagination-bar-${alignment}`]: true,
+      }, ref: (el) => (this.paginationBarEl = el) }, (showItemsPerPage || showItemsPerPageControl) && (h("div", { class: "item-controls" }, showItemsPerPageControl && (h("div", { class: "items-per-page-holder" }, h("ic-typography", { class: {
+        [`pagination-text-${appearance}`]: true,
+        ["items-per-page-control-label"]: true,
+      }, variant: "label", onClick: () => focusElFromLabel("ic-select") }, this.itemLabel, "s per ", this.pageLabel.toLowerCase()), h("ic-select", { small: true, label: "items-per-page-input", class: "items-per-page-input", hideLabel: true, options: itemsPerPageOptions, value: this.itemsPerPage, onIcChange: () => this.changeItemsPerPage() }))), showItemsPerPage && paginationType === "data" ? (h("ic-typography", { class: {
+        [`pagination-text-${appearance}`]: true,
+        ["item-pagination-label"]: true,
+      }, variant: "label", "aria-live": "polite" }, this.lowerBound, " - ", this.upperBound, " of ", this.totalItems, " ", this.itemLabel.toLowerCase(), this.totalItems > 1 ? "s" : "")) : (showItemsPerPage && (h("ic-typography", { class: {
+        [`pagination-text-${appearance}`]: true,
+        ["page-pagination-label"]: true,
+      }, variant: "label", "aria-live": "polite" }, this.pageLabel, " ", this.currentPage, " of ", this.totalPages))))), h("div", { class: {
+        ["pagination-controls"]: true,
+        ["pagination-controls-wrap"]: this.paginationWrapped,
+      } }, h("div", { class: "pagination-holder" }, h("ic-pagination", { appearance: appearance, type: paginationControl, pages: this.totalPages })), showGoToPageControl && (h("div", { class: "go-to-page-holder" }, h("ic-typography", { class: { [`pagination-text-${appearance}`]: true }, variant: "label", onClick: () => focusElFromLabel("ic-text-field") }, "Go to ", this.pageLabel.toLowerCase()), h("ic-tooltip", { label: this.inputError, target: `#${PAGE_INPUT_FIELD_ID}`, disableHover: true, disableClick: true }, h("ic-text-field", { type: "number", small: true, label: PAGE_INPUT_FIELD_ID, class: PAGE_INPUT_FIELD_ID, id: PAGE_INPUT_FIELD_ID, hideLabel: true, onKeyDown: (ev) => this.handleKeydown(ev), onKeyUp: (ev) => this.handleKeyUp(ev), onInput: () => this.handleInputChange(), max: this.totalPages, min: "1", validationInlineInternal: true, onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus() })), h("ic-button", { appearance: appearance, variant: "secondary", onClick: () => this.goToPage(), size: "small", class: "go-to-page-button" }, "Go"))))));
+  }
+  get el() { return this; }
+  static get style() { return icPaginationBarCss; }
+}, [1, "ic-pagination-bar", {
+    "alignment": [1],
+    "appearance": [1],
+    "itemLabel": [1, "item-label"],
+    "itemsPerPageOptions": [1040],
+    "paginationControl": [1, "pagination-control"],
+    "paginationType": [1, "pagination-type"],
+    "pageLabel": [1, "page-label"],
+    "showGoToPageControl": [4, "show-go-to-page-control"],
+    "showItemsPerPage": [4, "show-items-per-page"],
+    "showItemsPerPageControl": [4, "show-items-per-page-control"],
+    "totalItems": [2, "total-items"],
+    "currentPage": [32],
+    "inputError": [32],
+    "itemsPerPage": [32],
+    "lowerBound": [32],
+    "paginationWidth": [32],
+    "paginationWrapped": [32],
+    "totalPages": [32],
+    "upperBound": [32]
+  }, [[0, "icPageChange", "pageChangeHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ic-pagination-bar", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-menu", "ic-pagination", "ic-pagination-item", "ic-select", "ic-text-field", "ic-tooltip", "ic-typography"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ic-pagination-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PaginationBar);
+      }
+      break;
+    case "ic-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "ic-input-component-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "ic-input-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "ic-input-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "ic-input-validation":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ic-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ic-pagination":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ic-pagination-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ic-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ic-text-field":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "ic-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ic-typography":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PaginationBar as P, defineCustomElement as d };
+
+//# sourceMappingURL=ic-pagination-bar2.js.map