@ukic/web-components 3.0.0 → 3.1.0

package/dist/collection/components/ic-divider/ic-divider.css

@@ -1,11 +1,302 @@
+/**
+  * @prop --ic-divider-vertical-height: The height of a vertical divider. The default value is `inherit`. 
+  */
+/**
+  * @prop --ic-divider-horizontal-width: The width of a horizontal divider. The default value is `inherit`.
+  */
+/**
+  * @prop --ic-divider-label-width: The max-width of the divider label. When orientation is set to `horizontal`, the default value is `max(20rem, 60%)`. When orientation is set to `vertical`, the default value is `20 rem`.
+  */
+
+/* IC-DIVIDER COLORS */
+/**
+  * @internal @prop --ic-divider-background
+  */
+/**
+  * @internal @prop --ic-divider-background-monochrome
+  */
+/**
+  * @internal @prop --ic-divider-label
+  */
+/**
+  * @internal @prop --ic-divider-label-monochrome
+  */
+
+/* Horizontal Divider */
+:host(.ic-divider-horizontal) {
+  display: flex;
+  width: var(--ic-divider-horizontal-width, 100%);
+  align-items: center;
+  -moz-column-gap: var(--ic-space-xxs);
+       column-gap: var(--ic-space-xxs);
+}
+
 hr {
   padding: 0;
   margin: 0;
   border: none;
-  height: var(--ic-space-1px);
-  background-color: var(--ic-keyline-darken-rgb);
+  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);
+  width: inherit;
+}
+
+:host(.ic-divider-horizontal)::before,
+:host(.ic-divider-horizontal)::after {
+  border-left: none !important;
+}
+
+:host(.ic-divider-horizontal[label-placement="right"])::before,
+:host(.ic-divider-horizontal[label-placement="center"])::before,
+:host(.ic-divider-horizontal[label-placement="left"])::after,
+:host(.ic-divider-horizontal[label-placement="center"])::after {
+  content: "";
+  border: none;
+  width: 100%;
+}
+
+/* Vertical Divider */
+:host(.ic-divider-vertical) {
+  display: flex;
+  flex-direction: column;
+  height: var(--ic-divider-vertical-height, inherit);
+  width: -moz-max-content;
+  width: max-content;
+  align-items: center;
+  -moz-column-gap: var(--ic-space-xxs);
+       column-gap: var(--ic-space-xxs);
+  border: none;
+}
+
+:host(.ic-divider-vertical) div.vertical-divider {
+  display: flex;
+  height: inherit;
+}
+
+:host(.ic-divider-vertical[label-placement="bottom"])::before,
+:host(.ic-divider-vertical[label-placement="center"])::before,
+:host(.ic-divider-vertical[label-placement="top"])::after,
+:host(.ic-divider-vertical[label-placement="center"])::after {
+  content: "";
+  height: 100%;
+}
+
+/* Theme */
+hr,
+:host(.ic-divider-horizontal)[label-placement="right"]::before,
+:host(.ic-divider-horizontal[label-placement="center"])::before,
+:host(.ic-divider-horizontal[label-placement="left"])::after,
+:host(.ic-divider-horizontal[label-placement="center"])::after {
+  border-bottom: solid var(--ic-space-1px) var(--ic-divider-background);
+}
+
+:host(.ic-divider-monochrome) hr,
+:host(.ic-divider-monochrome.ic-divider-horizontal)[label-placement="right"]::before,
+:host(.ic-divider-monochrome.ic-divider-horizontal[label-placement="center"])::before,
+:host(.ic-divider-monochrome.ic-divider-horizontal[label-placement="left"])::after,
+:host(.ic-divider-monochrome.ic-divider-horizontal[label-placement="center"])::after {
+  border-bottom-color: var(--ic-divider-background-monochrome);
+}
+
+:host() div.vertical-divider,
+:host(.ic-divider-vertical[label-placement="bottom"])::before,
+:host(.ic-divider-vertical[label-placement="center"])::before,
+:host(.ic-divider-vertical[label-placement="top"])::after,
+:host(.ic-divider-vertical[label-placement="center"])::after {
+  border-left: solid var(--ic-space-1px) var(--ic-divider-background);
+}
+
+:host(.ic-divider-monochrome) div.vertical-divider,
+:host(.ic-divider-monochrome.ic-divider-vertical[label-placement="bottom"])::before,
+:host(.ic-divider-monochrome.ic-divider-vertical[label-placement="center"])::before,
+:host(.ic-divider-monochrome.ic-divider-vertical[label-placement="top"])::after,
+:host(.ic-divider-monochrome.ic-divider-vertical[label-placement="center"])::after {
+  border-left-color: var(--ic-divider-background-monochrome);
+}
+
+/* Divider in ic-side-navigation */
+:host(.ic-side-navigation-keyline.ic-theme-dark) {
+  --ic-side-navigation-keyline: var(--ic-state-layer-lighten-20);
+}
+
+:host(.ic-side-navigation-keyline.ic-theme-light) {
+  --ic-side-navigation-keyline: var(--ic-state-layer-darken-20);
+}
+
+:host(.ic-side-navigation-keyline.ic-theme-dark) hr,
+:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal)[label-placement="right"]::before,
+:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement="center"])::before,
+:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement="left"])::after,
+:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-horizontal[label-placement="center"])::after {
+  border-bottom-color: var(--ic-side-navigation-keyline);
+}
+
+:host(.ic-side-navigation-keyline.ic-theme-dark) div.vertical-divider,
+:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement="bottom"])::before,
+:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement="center"])::before,
+:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement="top"])::after,
+:host(.ic-side-navigation-keyline.ic-theme-dark.ic-divider-vertical[label-placement="center"])::after {
+  border-left-color: var(--ic-side-navigation-keyline);
+}
+
+:host(.ic-side-navigation-keyline.ic-theme-light) hr,
+:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal)[label-placement="right"]::before,
+:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement="center"])::before,
+:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement="left"])::after,
+:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-horizontal[label-placement="center"])::after {
+  border-bottom-color: var(--ic-side-navigation-keyline);
+}
+
+:host(.ic-side-navigation-keyline.ic-theme-light) div.vertical-divider,
+:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement="bottom"])::before,
+:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement="center"])::before,
+:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement="top"])::after,
+:host(.ic-side-navigation-keyline.ic-theme-light.ic-divider-vertical[label-placement="center"])::after {
+  border-left-color: var(--ic-divider-background-monochrome);
+}
+
+/* Weight */
+:host(.ic-divider-very-thick) hr,
+:host(.ic-divider-very-thick[label-placement="right"])::before,
+:host(.ic-divider-very-thick[label-placement="center"])::before,
+:host(.ic-divider-very-thick[label-placement="left"])::after,
+:host(.ic-divider-very-thick[label-placement="center"])::after {
+  border-bottom-width: var(--ic-space-xs);
 }
 
-hr.light {
-  background-color: var(--ic-keyline-lighten-rgb);
+:host(.ic-divider-very-thick) .vertical-divider,
+:host(.ic-divider-very-thick[label-placement="bottom"])::before,
+:host(.ic-divider-very-thick[label-placement="center"])::before,
+:host(.ic-divider-very-thick[label-placement="top"])::after,
+:host(.ic-divider-very-thick[label-placement="center"])::after {
+  border-left-width: var(--ic-space-xs);
+}
+
+:host(.ic-divider-thick) hr,
+:host(.ic-divider-thick[label-placement="right"])::before,
+:host(.ic-divider-thick[label-placement="center"])::before,
+:host(.ic-divider-thick[label-placement="left"])::after,
+:host(.ic-divider-thick[label-placement="center"])::after {
+  border-bottom-width: var(--ic-space-xxs);
+}
+
+:host(.ic-divider-thick) .vertical-divider,
+:host(.ic-divider-thick[label-placement="bottom"])::before,
+:host(.ic-divider-thick[label-placement="center"])::before,
+:host(.ic-divider-thick[label-placement="top"])::after,
+:host(.ic-divider-thick[label-placement="center"])::after {
+  border-left-width: var(--ic-space-xxs);
+}
+
+:host(.ic-divider-medium) hr,
+:host(.ic-divider-medium[label-placement="right"])::before,
+:host(.ic-divider-medium[label-placement="center"])::before,
+:host(.ic-divider-medium[label-placement="left"])::after,
+:host(.ic-divider-medium[label-placement="center"])::after {
+  border-bottom-width: var(--ic-space-xxxs);
+}
+
+:host(.ic-divider-medium) .vertical-divider,
+:host(.ic-divider-medium[label-placement="bottom"])::before,
+:host(.ic-divider-medium[label-placement="center"])::before,
+:host(.ic-divider-medium[label-placement="top"])::after,
+:host(.ic-divider-medium[label-placement="center"])::after {
+  border-left-width: var(--ic-space-xxxs);
+}
+
+:host(.ic-divider-thin) hr,
+:host(.ic-divider-thin[label-placement="right"])::before,
+:host(.ic-divider-thin[label-placement="center"])::before,
+:host(.ic-divider-thin[label-placement="left"])::after,
+:host(.ic-divider-thin[label-placement="center"])::after {
+  border-bottom-width: var(--ic-space-1px);
+}
+
+:host(.ic-divider-thin) .vertical-divider,
+:host(.ic-divider-thin[label-placement="bottom"])::before,
+:host(.ic-divider-thin.ic-divider-vertical[label-placement="center"])::before,
+:host(.ic-divider-thin[label-placement="top"])::after,
+:host(.ic-divider-thin.ic-divider-vertical[label-placement="center"])::after {
+  border-left-width: var(--ic-space-1px);
+}
+
+/* Border styling */
+:host(.ic-divider-dashed) hr,
+:host(.ic-divider-dashed[label-placement="right"])::before,
+:host(.ic-divider-dashed[label-placement="center"])::before,
+:host(.ic-divider-dashed[label-placement="left"])::after,
+:host(.ic-divider-dashed[label-placement="center"])::after {
+  border-bottom-style: dashed;
+}
+
+:host(.ic-divider-dashed) .vertical-divider,
+:host(.ic-divider-dashed[label-placement="bottom"])::before,
+:host(.ic-divider-dashed[label-placement="center"])::before,
+:host(.ic-divider-dashed[label-placement="top"])::after,
+:host(.ic-divider-dashed[label-placement="center"])::after {
+  border-left-style: dashed;
+}
+
+/* Label styling */
+:host() .ic-divider-label {
+  text-wrap: wrap;
+  text-align: left;
+  width: -moz-max-content;
+  width: max-content;
+  max-width: var(--ic-divider-label-width, max(20rem, 60%));
+}
+
+:host(.ic-divider-horizontal[label-placement="center"]) .ic-divider-label {
+  text-align: center;
+}
+
+:host(.ic-divider-vertical) .ic-divider-label {
+  text-align: center;
+}
+
+:host() .ic-divider-label-container {
+  width: -moz-max-content;
+  width: max-content;
+  max-width: var(--ic-divider-label-width, max(20rem, 60%));
+}
+
+:host(.ic-divider-vertical) .ic-divider-label {
+  max-width: var(--ic-divider-label-width, 20rem);
+}
+
+:host(.ic-divider-vertical) .ic-divider-label-container {
+  max-width: var(--ic-divider-label-width, 20rem);
+}
+
+:host() .ic-divider-label p {
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+}
+
+:host() .ic-divider-label,
+:host() ::slotted(*) {
+  color: var(--ic-divider-label);
+}
+
+:host(.ic-divider-monochrome) .ic-divider-label,
+:host(.ic-divider-monochrome) ::slotted(*) {
+  color: var(--ic-divider-label-monochrome);
+}
+
+/* High contrast */
+@media (forced-colors: active) {
+  hr,
+  :host(.ic-divider-horizontal[label-placement="right"])::before,
+  :host(.ic-divider-horizontal[label-placement="center"])::before,
+  :host(.ic-divider-horizontal[label-placement="left"])::after,
+  :host(.ic-divider-horizontal[label-placement="center"])::after {
+    border-bottom-color: transparent;
+  }
+
+  :host() div.vertical-divider,
+  :host(.ic-divider-vertical[label-placement="bottom"])::before,
+  :host(.ic-divider-vertical[label-placement="center"])::before,
+  :host(.ic-divider-vertical[label-placement="top"])::after,
+  :host(.ic-divider-vertical[label-placement="center"])::after {
+    border-left-color: transparent;
+  }
 }

package/dist/collection/components/ic-divider/ic-divider.js

@@ -1,18 +1,99 @@
-import { h, Host } from "@stencil/core";
-import { getThemeForegroundColor } from "../../utils/helpers";
-import { IcThemeForegroundEnum, } from "../../utils/types";
+import { h, Host, } from "@stencil/core";
+import { getBrandForegroundAppearance, isPropDefined, slotHasContent, } from "../../utils/helpers";
 export class Divider {
     constructor() {
-        this.foregroundColor = getThemeForegroundColor();
+        this.foregroundColor = getBrandForegroundAppearance();
+        /**
+         * The line style of the divider.
+         */
+        this.borderStyle = "solid";
+        /**
+         * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.
+         */
+        this.labelPlacement = "center";
+        /** If `true`, the divider will be displayed in a grey colour. */
+        this.monochrome = false;
+        /**
+         * The orientation of the divider.
+         */
+        this.orientation = "horizontal";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The thickness of the divider.
+         */
+        this.weight = "thin";
     }
-    themeChangeHandler(ev) {
-        const theme = ev.detail;
-        this.foregroundColor = theme.mode;
+    brandChangeHandler(ev) {
+        this.foregroundColor = ev.detail.mode;
+    }
+    updateMonochromeState() {
+        var _a;
+        const parentEl = this.el.parentElement;
+        if (parentEl) {
+            const isBottomSideNav = parentEl.classList.contains("bottom-side-nav");
+            const isBottomWrapper = (_a = parentEl.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("bottom-wrapper");
+            if (parentEl.tagName === "IC-SIDE-NAVIGATION" ||
+                (isBottomSideNav && isBottomWrapper)) {
+                this.el.classList.add("ic-side-navigation-keyline");
+                if (this.foregroundColor === "light") {
+                    this.theme = "dark";
+                }
+                else {
+                    this.theme = "light";
+                }
+            }
+        }
+    }
+    componentWillRender() {
+        this.updateMonochromeState();
     }
     render() {
-        return (h(Host, { "aria-hidden": "true" }, h("hr", { class: {
-                ["light"]: this.foregroundColor === IcThemeForegroundEnum.Light,
-            } })));
+        const { borderStyle, label, labelPlacement, monochrome, orientation, weight, } = this;
+        const { theme } = this;
+        const invalidPropCombination = (placement) => {
+            console.error(`${placement.charAt(0).toUpperCase() + placement.slice(1)} label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`);
+        };
+        if (((labelPlacement === "left" || labelPlacement === "right") &&
+            orientation === "vertical") ||
+            ((labelPlacement === "top" || labelPlacement === "bottom") &&
+                orientation === "horizontal")) {
+            invalidPropCombination(labelPlacement);
+        }
+        const getTypographyVariant = (weight) => {
+            switch (weight) {
+                case "very-thick":
+                    return "h4";
+                case "thick":
+                    return "subtitle-large";
+                default:
+                    return "label";
+            }
+        };
+        const renderLabel = () => {
+            if (slotHasContent(this.el, "label")) {
+                return (h("div", { class: "ic-divider-label-container" }, h("slot", { name: "label" })));
+            }
+            else if (isPropDefined(label)) {
+                return (h("ic-typography", { class: "ic-divider-label", variant: getTypographyVariant(weight) }, h("p", null, label)));
+            }
+            return null;
+        };
+        return (h(Host, Object.assign({ class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`ic-divider-monochrome`]: !!monochrome,
+                [`ic-divider-${orientation}`]: true,
+                [`ic-divider-${weight}`]: true,
+                [`ic-divider-${borderStyle}`]: true,
+            } }, ((orientation === "vertical" ||
+            (!!renderLabel() && !!isPropDefined(labelPlacement))) && {
+            "aria-orientation": orientation,
+            role: "separator",
+        })), orientation === "horizontal" &&
+            (!renderLabel() || !isPropDefined(labelPlacement)) && h("hr", null), !!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel(), orientation === "vertical" &&
+            (!renderLabel() || !isPropDefined(labelPlacement)) && (h("div", { class: "vertical-divider" }))));
     }
     static get is() { return "ic-divider"; }
     static get encapsulation() { return "scoped"; }
@@ -26,15 +107,194 @@ export class Divider {
             "$": ["ic-divider.css"]
         };
     }
+    static get properties() {
+        return {
+            "borderStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDividerStyles",
+                    "resolved": "\"dashed\" | \"solid\" | undefined",
+                    "references": {
+                        "IcDividerStyles": {
+                            "location": "import",
+                            "path": "./ic-divider.types",
+                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The line style of the divider."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border-style",
+                "reflect": false,
+                "defaultValue": "\"solid\""
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the divider. The label placement will need to be set for the label to be displayed correctly."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "labelPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDividerLabelPlacement",
+                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
+                    "references": {
+                        "IcDividerLabelPlacement": {
+                            "location": "import",
+                            "path": "./ic-divider.types",
+                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerLabelPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label-placement",
+                "reflect": false,
+                "defaultValue": "\"center\""
+            },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the divider will be displayed in a grey colour."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\" | undefined",
+                    "references": {
+                        "IcOrientation": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The orientation of the divider."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "\"horizontal\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcThemeMode | IcBrandForeground",
+                    "resolved": "\"dark\" | \"default\" | \"inherit\" | \"light\" | undefined",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        },
+                        "IcBrandForeground": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcBrandForeground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
+            "weight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcDividerWeights",
+                    "resolved": "\"medium\" | \"thick\" | \"thin\" | \"very-thick\" | undefined",
+                    "references": {
+                        "IcDividerWeights": {
+                            "location": "import",
+                            "path": "./ic-divider.types",
+                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerWeights"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The thickness of the divider."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "weight",
+                "reflect": false,
+                "defaultValue": "\"thin\""
+            }
+        };
+    }
     static get states() {
         return {
             "foregroundColor": {}
         };
     }
+    static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false

package/dist/collection/components/ic-divider/ic-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-divider.js","sourceRoot":"","sources":["../../../src/components/ic-divider/ic-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAGL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,OAAO;;+BAC4B,uBAAuB,EAAE;;IAGvE,kBAAkB,CAAC,EAAe;QAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;QACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,mBAAa,MAAM;YACtB,UACE,KAAK,EAAE;oBACL,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,KAAK,qBAAqB,CAAC,KAAK;iBAChE,GACD,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Host, Listen, State } from \"@stencil/core\";\n\nimport { getThemeForegroundColor } from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  render() {\n    return (\n      <Host aria-hidden=\"true\">\n        <hr\n          class={{\n            [\"light\"]: this.foregroundColor === IcThemeForegroundEnum.Light,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-divider.js","sourceRoot":"","sources":["../../../src/components/ic-divider/ic-divider.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  h,\n  Component,\n  Host,\n  Listen,\n  State,\n  Prop,\n  Element,\n} from \"@stencil/core\";\n\nimport {\n  getBrandForegroundAppearance,\n  isPropDefined,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nimport {\n  IcBrand,\n  IcOrientation,\n  IcBrandForeground,\n  IcThemeMode,\n} from \"../../utils/types\";\n\nimport {\n  IcDividerLabelPlacement,\n  IcDividerStyles,\n  IcDividerWeights,\n} from \"./ic-divider.types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @Element() el: HTMLIcDividerElement;\n\n  @State() foregroundColor: IcBrandForeground = getBrandForegroundAppearance();\n\n  /**\n   * The line style of the divider.\n   */\n  @Prop() borderStyle?: IcDividerStyles = \"solid\";\n\n  /**\n   * The label for the divider. The label placement will need to be set for the label to be displayed correctly.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.\n   */\n  @Prop() labelPlacement?: IcDividerLabelPlacement = \"center\";\n\n  /** If `true`, the divider will be displayed in a grey colour. */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The orientation of the divider.\n   */\n  @Prop() orientation?: IcOrientation = \"horizontal\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode | IcBrandForeground = \"inherit\";\n\n  /**\n   * The thickness of the divider.\n   */\n  @Prop() weight?: IcDividerWeights = \"thin\";\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.foregroundColor = ev.detail.mode;\n  }\n\n  private updateMonochromeState(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl) {\n      const isBottomSideNav = parentEl.classList.contains(\"bottom-side-nav\");\n      const isBottomWrapper =\n        parentEl.parentElement?.classList.contains(\"bottom-wrapper\");\n\n      if (\n        parentEl.tagName === \"IC-SIDE-NAVIGATION\" ||\n        (isBottomSideNav && isBottomWrapper)\n      ) {\n        this.el.classList.add(\"ic-side-navigation-keyline\");\n        if (this.foregroundColor === \"light\") {\n          this.theme = \"dark\";\n        } else {\n          this.theme = \"light\";\n        }\n      }\n    }\n  }\n\n  componentWillRender(): void {\n    this.updateMonochromeState();\n  }\n\n  render() {\n    const {\n      borderStyle,\n      label,\n      labelPlacement,\n      monochrome,\n      orientation,\n      weight,\n    } = this;\n\n    const { theme } = this;\n\n    const invalidPropCombination = (\n      placement: IcDividerLabelPlacement\n    ): void => {\n      console.error(\n        `${\n          placement.charAt(0).toUpperCase() + placement.slice(1)\n        } label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`\n      );\n    };\n\n    if (\n      ((labelPlacement === \"left\" || labelPlacement === \"right\") &&\n        orientation === \"vertical\") ||\n      ((labelPlacement === \"top\" || labelPlacement === \"bottom\") &&\n        orientation === \"horizontal\")\n    ) {\n      invalidPropCombination(labelPlacement);\n    }\n\n    const getTypographyVariant = (weight: string) => {\n      switch (weight) {\n        case \"very-thick\":\n          return \"h4\";\n        case \"thick\":\n          return \"subtitle-large\";\n        default:\n          return \"label\";\n      }\n    };\n\n    const renderLabel = () => {\n      if (slotHasContent(this.el, \"label\")) {\n        return (\n          <div class=\"ic-divider-label-container\">\n            <slot name=\"label\"></slot>\n          </div>\n        );\n      } else if (isPropDefined(label)) {\n        return (\n          <ic-typography\n            class=\"ic-divider-label\"\n            variant={getTypographyVariant(weight!)}\n          >\n            <p>{label}</p>\n          </ic-typography>\n        );\n      }\n      return null;\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-divider-monochrome`]: !!monochrome,\n          [`ic-divider-${orientation}`]: true,\n          [`ic-divider-${weight}`]: true,\n          [`ic-divider-${borderStyle}`]: true,\n        }}\n        {...((orientation === \"vertical\" ||\n          (!!renderLabel() && !!isPropDefined(labelPlacement))) && {\n          \"aria-orientation\": orientation,\n          role: \"separator\",\n        })}\n      >\n        {orientation === \"horizontal\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && <hr />}\n        {!!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel()}\n        {orientation === \"vertical\" &&\n          (!renderLabel() || !isPropDefined(labelPlacement)) && (\n            <div class=\"vertical-divider\"></div>\n          )}\n      </Host>\n    );\n  }\n}\n"]}