@ukic/web-components 2.4.1 → 2.5.0

package/dist/collection/components/ic-accordion-group/ic-accordion-group.css

@@ -0,0 +1,465 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[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;
+}
+
+
+.group-title-container {
+  padding: var(--ic-space-xs);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+:host(.small) .group-title-container {
+  padding: var(--ic-space-xxs) var(--ic-space-xs);
+}
+
+:host(.large) .group-title-container {
+  padding: var(--ic-space-sm) var(--ic-space-xs);
+}
+
+:host(.light) {
+  color: var(--ic-architectural-white);
+}
+
+:host(.accordion-group.dark) ::slotted(ic-accordion) {
+  color: var(--ic-architectural-white);
+}

package/dist/collection/components/ic-accordion-group/ic-accordion-group.js

@@ -0,0 +1,216 @@
+import { h, Host, } from "@stencil/core";
+let accordionGroupIds = 0;
+export class AccordionGroup {
+  constructor() {
+    this.accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;
+    this.handleExpanded = () => {
+      if (this.areAllAccordionsOpen) {
+        this.expanded = false;
+        this.accordions.forEach((acc) => {
+          acc.expanded = this.expanded;
+        });
+      }
+      else {
+        this.expanded = true;
+        this.accordions.forEach((acc) => {
+          acc.expanded = this.expanded;
+        });
+      }
+      this.setExpandedToAreAllAccordionsOpen();
+    };
+    this.linkAccordions = () => {
+      this.accordions.forEach((accordion) => {
+        accordion.setAttribute("context-id", this.accordionGroupId);
+      });
+    };
+    this.setExpandedToAreAllAccordionsOpen = () => {
+      this.areAllAccordionsOpen = this.accordions.every((accordion) => !!accordion.expanded);
+    };
+    this.accordions = undefined;
+    this.areAllAccordionsOpen = undefined;
+    this.appearance = "default";
+    this.expanded = false;
+    this.groupTitle = "";
+    this.singleExpansion = false;
+    this.size = "default";
+  }
+  componentDidLoad() {
+    const accordionDirectChildren = this.el.children;
+    this.accordions = Array.from(accordionDirectChildren).filter((child) => child.tagName === "IC-ACCORDION");
+    this.linkAccordions();
+    this.accordions.forEach((acc) => {
+      acc.appearance = this.appearance;
+    });
+    this.accordions.forEach((acc) => {
+      acc.size = this.size;
+    });
+    if (this.expanded) {
+      this.accordions.forEach((acc) => {
+        acc.expanded = true;
+      });
+      this.setExpandedToAreAllAccordionsOpen();
+    }
+    else {
+      this.setExpandedToAreAllAccordionsOpen();
+      this.expanded = this.areAllAccordionsOpen;
+    }
+  }
+  handleAccordionClicked(event) {
+    if (!this.singleExpansion) {
+      // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible
+      this.setExpandedToAreAllAccordionsOpen();
+    }
+    else {
+      this.accordions.forEach((acc) => {
+        if (acc.expanded && event.detail.id !== acc.id) {
+          acc.expanded = false;
+        }
+      });
+    }
+  }
+  render() {
+    const { appearance, size, groupTitle, singleExpansion } = this;
+    return (h(Host, { "context-id": this.accordionGroupId, class: {
+        [`${appearance}`]: true,
+        [`${size}`]: true,
+        ["accordion-group"]: true,
+      } }, h("div", { class: "group-title-container" }, h("ic-typography", { variant: "h4" }, h("h3", null, groupTitle)), !singleExpansion && (h("ic-button", { appearance: appearance === "light" ? "light" : "default", onClick: this.handleExpanded, variant: "tertiary" }, !this.areAllAccordionsOpen ? "See all" : "Hide all"))), h("slot", null)));
+  }
+  static get is() { return "ic-accordion-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ic-accordion-group.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ic-accordion-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcThemeForeground",
+          "resolved": "\"dark\" | \"default\" | \"light\"",
+          "references": {
+            "IcThemeForeground": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcThemeForeground"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The appearance of the accordion group, e.g dark, or light."
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the accordion will load in an expanded state."
+        },
+        "attribute": "expanded",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "groupTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The header for the accordion group."
+        },
+        "attribute": "group-title",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "singleExpansion": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, only one accordion will open at a time."
+        },
+        "attribute": "single-expansion",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizes",
+          "resolved": "\"default\" | \"large\" | \"small\"",
+          "references": {
+            "IcSizes": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizes"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the accordion."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "accordions": {},
+      "areAllAccordionsOpen": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "accordionClicked",
+        "method": "handleAccordionClicked",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+// add single expansion without title
+//# sourceMappingURL=ic-accordion-group.js.map

package/dist/collection/components/ic-accordion-group/ic-accordion-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-accordion-group.js","sourceRoot":"","sources":["../../../src/components/ic-accordion-group/ic-accordion-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport { IcThemeForeground, IcSizes } from \"../../utils/types\";\n\nlet accordionGroupIds = 0;\n@Component({\n  tag: \"ic-accordion-group\",\n  styleUrl: \"ic-accordion-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class AccordionGroup {\n  private accordionGroupId = `ic-accordion-group-${accordionGroupIds++}`;\n\n  @Element() el: HTMLIcAccordionGroupElement;\n\n  @State() accordions: HTMLIcAccordionElement[];\n\n  @State() areAllAccordionsOpen: boolean;\n  /**\n   * The appearance of the accordion group, e.g dark, or light.\n   */\n  @Prop() appearance: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the accordion will load in an expanded state.\n   */\n  @Prop({ mutable: true }) expanded: boolean = false;\n\n  /**\n   * The header for the accordion group.\n   */\n  @Prop() groupTitle: string = \"\";\n\n  /**\n   * If `true`, only one accordion will open at a time.\n   */\n  @Prop() singleExpansion: boolean = false;\n\n  /**\n   * The size of the accordion.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  componentDidLoad(): void {\n    const accordionDirectChildren = (this.el as HTMLElement).children;\n    this.accordions = Array.from(accordionDirectChildren).filter(\n      (child) => child.tagName === \"IC-ACCORDION\"\n    ) as HTMLIcAccordionElement[];\n    this.linkAccordions();\n    this.accordions.forEach((acc) => {\n      acc.appearance = this.appearance;\n    });\n    this.accordions.forEach((acc) => {\n      acc.size = this.size;\n    });\n    if (this.expanded) {\n      this.accordions.forEach((acc) => {\n        acc.expanded = true;\n      });\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.setExpandedToAreAllAccordionsOpen();\n      this.expanded = this.areAllAccordionsOpen;\n    }\n  }\n\n  @Listen(\"accordionClicked\")\n  handleAccordionClicked(event: CustomEvent): void {\n    if (!this.singleExpansion) {\n      // 'See all' should be visible until all accordions are open, then 'Hide all' should be visible\n      this.setExpandedToAreAllAccordionsOpen();\n    } else {\n      this.accordions.forEach((acc) => {\n        if (acc.expanded && event.detail.id !== acc.id) {\n          acc.expanded = false;\n        }\n      });\n    }\n  }\n\n  private handleExpanded = () => {\n    if (this.areAllAccordionsOpen) {\n      this.expanded = false;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    } else {\n      this.expanded = true;\n      this.accordions.forEach((acc) => {\n        acc.expanded = this.expanded;\n      });\n    }\n    this.setExpandedToAreAllAccordionsOpen();\n  };\n\n  private linkAccordions = () => {\n    this.accordions.forEach((accordion) => {\n      accordion.setAttribute(\"context-id\", this.accordionGroupId);\n    });\n  };\n\n  private setExpandedToAreAllAccordionsOpen = () => {\n    this.areAllAccordionsOpen = this.accordions.every(\n      (accordion) => !!accordion.expanded\n    );\n  };\n\n  render() {\n    const { appearance, size, groupTitle, singleExpansion } = this;\n    return (\n      <Host\n        context-id={this.accordionGroupId}\n        class={{\n          [`${appearance}`]: true,\n          [`${size}`]: true,\n          [\"accordion-group\"]: true,\n        }}\n      >\n        <div class=\"group-title-container\">\n          <ic-typography variant=\"h4\">\n            <h3>{groupTitle}</h3>\n          </ic-typography>\n          {!singleExpansion && (\n            <ic-button\n              appearance={appearance === \"light\" ? \"light\" : \"default\"}\n              onClick={this.handleExpanded}\n              variant=\"tertiary\"\n            >\n              {!this.areAllAccordionsOpen ? \"See all\" : \"Hide all\"}\n            </ic-button>\n          )}\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n// add single expansion without title\n"]}