@postnord/pn-marketweb-components 4.2.2 → 4.2.4

package/collection/components/cards/pn-versa-card/pn-versa-card.js

@@ -0,0 +1,326 @@
+import { HeadingTag } from "../../../globals/HeadingTag";
+import { h, Host, } from "@stencil/core";
+/** A short description about `pn-versa-card` */
+export class PnVersaCard {
+    constructor() {
+        this.label = undefined;
+        this.heading = undefined;
+        this.preamble = undefined;
+        this.imageGrow = false;
+        this.horizontal = false;
+        this.imgAlignment = 'left';
+        this.hasImageCover = false;
+        this.alignMiddle = false;
+        this.center = false;
+        this.roundImage = false;
+        this.headingLevel = 'h3';
+        this.opacity = 90;
+        this.transparentBackground = false;
+        this.showImage = false;
+        this.showRte = false;
+        this.showCta = false;
+    }
+    hostElement;
+    cx(parts) {
+        return parts.filter(Boolean).join(' ');
+    }
+    get hasImageCoverText() {
+        return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);
+    }
+    get normalizedOpacity() {
+        return Math.min(100, Math.max(0, this.opacity ?? 90));
+    }
+    // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.
+    get cardColor() {
+        const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();
+        return value || null;
+    }
+    get hasBg() {
+        return !!this.cardColor;
+    }
+    get cardClass() {
+        return this.cx([
+            'pn-versa-card',
+            // modifiers      
+            this.horizontal && 'pn-versa-card-horizontal',
+            this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',
+            this.hasBg && 'pn-versa-card-hasBg',
+            this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top
+            this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set
+            this.roundImage && 'pn-versa-card-hasRoundedImage',
+            this.center && 'pn-versa-card-center',
+            this.alignMiddle && 'pn-versa-card-alignMiddle',
+            this.imageGrow && 'pn-versa-card-imageGrow',
+            this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',
+        ]);
+    }
+    get showContent() {
+        return this.showTextContent || this.showCta;
+    }
+    get showTextContent() {
+        return !!(this.label || this.heading || this.preamble || this.showRte);
+    }
+    componentWillLoad() {
+        this.showImage = !!this.hostElement.querySelector('[slot="image"]');
+        this.showRte = !!this.hostElement.querySelector('[slot="rte"]');
+        this.showCta = !!this.hostElement.querySelector('[slot="cta"]');
+    }
+    render() {
+        return (h(Host, { key: '68795fe8f1d2c350e5a75587f4f3a4c5c7aa36c9' }, h("div", { key: '56ed337bc840a49cb2cabac58296816a863476d0', class: this.cardClass, style: { '--pn-versa-opacity': `${this.normalizedOpacity / 100}` } }, this.showImage && (h("div", { key: '819b335ef80afc4a7acdcdc4b8de3aa778f5848b', class: "pn-versa-card-imageWrapper" }, h("slot", { key: '29ec92758424d1ab78ec647a88960b30ef831296', name: "image" }))), this.showContent && (h("div", { key: '52f708312839f2026574e4c26e4d5cc7dd19d9c7', class: "pn-versa-card-content" }, this.showTextContent && h("div", { key: 'f945d3960dab715386493f01d798d81eec49f47d', class: "pn-versa-card-textContent" }, this.label && (h("span", { key: 'acf5de375907dbf4699d450cd8f358a68475808d', class: "pn-versa-card-label" }, this.label)), this.heading && (h(HeadingTag, { key: 'e2cdc9c1662c77184010fc6a5179b47959a637e9', cssClass: "pn-versa-card-heading", level: this.headingLevel }, this.heading)), this.preamble && (h("p", { key: '82c6e264660a5acc5227f9db0f0a7c5777e37d83', class: "pn-versa-card-preamble" }, this.preamble)), this.showRte && h("div", { key: '1025d88c618f24e63d8b75cf3fb62262d98015e0', class: "pn-versa-card-RTEtext" }, h("slot", { key: 'ec7cadcd2950cdb5d697f1bdd059d5ece1473168', name: "rte" }))), this.showCta && h("div", { key: '7ae363ccac0b3ea35559c97d0a45b8629c8c310e', class: "pn-versa-card-linkwrapper" }, h("slot", { key: 'e0d30dd052fab2dd5a3af805f67628b26e71750b', name: "cta" })))))));
+    }
+    static get is() { return "pn-versa-card"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-versa-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-versa-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "preamble": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "preamble",
+                "reflect": false
+            },
+            "imageGrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-grow",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "horizontal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "horizontal",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "imgAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "img-alignment",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "hasImageCover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "has-image-cover",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "alignMiddle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "align-middle",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "center": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "center",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "roundImage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "round-image",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h3'"
+            },
+            "opacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "opacity",
+                "reflect": false,
+                "defaultValue": "90"
+            },
+            "transparentBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "transparent-background",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showImage": {},
+            "showRte": {},
+            "showCta": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=pn-versa-card.js.map

package/collection/components/cards/pn-versa-card/pn-versa-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-versa-card.js","sourceRoot":"","sources":["../../../../src/components/cards/pn-versa-card/pn-versa-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeadingTag } from '@/globals/HeadingTag';\nimport {\n  Component,\n  Element,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n/** A short description about `pn-versa-card` */\n@Component({\n  tag: 'pn-versa-card',\n  styleUrl: 'pn-versa-card.scss',\n})\nexport class PnVersaCard {\n\n  @Element() hostElement: HTMLElement;\n\n  @Prop() label?: string;\n  @Prop() heading?: string;\n  @Prop() preamble?: string;\n  @Prop() imageGrow = false;\n\n  // Layout / modifiers\n  @Prop() horizontal = false;\n  @Prop() imgAlignment?: 'left' | 'right' = 'left';\n  @Prop() hasImageCover = false;\n  @Prop() alignMiddle = false;\n  @Prop() center = false;\n\n  @Prop() roundImage = false;\n  @Prop() headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h3';\n\n  @Prop() opacity: number = 90;\n  @Prop() transparentBackground = false;\n\n  private cx(parts: Array<string | false | null | undefined>) {\n    return parts.filter(Boolean).join(' ');\n  }\n\n  private get hasImageCoverText(): boolean {\n    return !!(this.label || this.heading || this.preamble || this.showRte || this.showCta);\n  }\n\n  private get normalizedOpacity(): number {\n    return Math.min(100, Math.max(0, this.opacity ?? 90));\n  }\n\n  // This getter reads the data-card-color attribute, which is used to set CSS variables for background and text colors in the SCSS file. It returns the color value or null if not set.\n  private get cardColor() {\n    const value = this.hostElement.getAttribute('data-card-color')?.trim().toLowerCase();\n    return value || null;\n  }\n\n  private get hasBg(): boolean {\n    return !!this.cardColor;\n  }\n\n  private get cardClass() {\n\n    return this.cx([\n      'pn-versa-card',\n\n      // modifiers      \n      this.horizontal && 'pn-versa-card-horizontal',\n      this.horizontal && this.imgAlignment === 'right' && 'pn-versa-card-horizontal--imgRight',\n      this.hasBg && 'pn-versa-card-hasBg',\n      this.hasImageCover && 'pn-versa-card-hasImageCover', // can be true without text, just means image covers whole card without text on top\n      this.hasImageCover && this.hasImageCoverText && 'pn-versa-card-hasImageCoverText', //has to have imageCover true AND imageCoverText in order for class to be set\n      this.roundImage && 'pn-versa-card-hasRoundedImage',\n      this.center && 'pn-versa-card-center',\n      this.alignMiddle && 'pn-versa-card-alignMiddle',\n      this.imageGrow && 'pn-versa-card-imageGrow',\n      this.hasBg && this.transparentBackground && 'pn-versa-card-transparentBackground',\n\n    ]);\n  }\n\n  private get showContent(): boolean {\n    return this.showTextContent || this.showCta;\n  }\n\n  private get showTextContent(): boolean {\n    return !!(this.label || this.heading || this.preamble || this.showRte);\n  }\n\n  @State() showImage: boolean = false;\n  @State() showRte: boolean = false;\n  @State() showCta: boolean = false;\n\n  componentWillLoad() {\n    this.showImage = !!this.hostElement.querySelector('[slot=\"image\"]');\n    this.showRte = !!this.hostElement.querySelector('[slot=\"rte\"]');\n    this.showCta = !!this.hostElement.querySelector('[slot=\"cta\"]');\n\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClass} style={{ '--pn-versa-opacity': `${this.normalizedOpacity / 100}` }}>\n          {this.showImage && (\n            <div class=\"pn-versa-card-imageWrapper\">\n              <slot name=\"image\" />\n            </div>)}\n          {this.showContent && (\n            <div class=\"pn-versa-card-content\">\n              {this.showTextContent && <div class=\"pn-versa-card-textContent\">\n                {this.label && (\n                  <span class=\"pn-versa-card-label\">{this.label}</span>\n                )}\n\n                {this.heading && (\n                  <HeadingTag cssClass=\"pn-versa-card-heading\" level={this.headingLevel}>{this.heading}</HeadingTag>\n                )}\n\n                {this.preamble && (\n                  <p class=\"pn-versa-card-preamble\">{this.preamble}</p>\n                )}\n\n                {this.showRte && <div class=\"pn-versa-card-RTEtext\">\n                  <slot name=\"rte\" />\n                </div>\n                }\n              </div>}\n\n              {this.showCta && <div class=\"pn-versa-card-linkwrapper\">\n                <slot name=\"cta\" />\n              </div>}\n\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}"]}