@postnord/pn-marketweb-components 2.4.27 → 2.4.29

package/collection/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows.stories.js

@@ -0,0 +1,86 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Dropdown with Multi Input Rows',
+  parameters: {
+    notes: readme,
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+  <pn-dropdown-with-multi-input-rows
+  dropdown-data='${args.dropdownData}'
+  language-code='${args.languageCode}'
+  first-dropdown-label='${args.firstDropdownLabel}'
+  first-dropdown-helper-text='${args.firstDropdownHelperText}'
+  second-dropdown-label='${args.secondDropdownLabel}'
+  second-dropdown-helper-text='${args.secondDropdownHelperText}'
+  second-dropdown-max='${args.secondDropdownMax}'
+  delete-multiple-rows-warning-text='${args.deleteMultipleRowsWarningText}'
+  confirm-delete-button-text='${args.confirmDeleteButtonText}'
+  abort-delete-button-text='${args.abortDeleteButtonText}'
+  frist-input-label='${args.fristInputLabel}'
+  frist-input-placeholder='${args.fristInputPlaceholder}'
+  first-input-min='${args.firstInputMin}'
+  first-input-max='${args.firstInputMax}'
+  first-input-warning='${args.firstInputWarning}'
+  first-input-warning-text='${args.firstInputWarningText}'
+  first-input-low-error-text='${args.firstInputLowErrorText}'
+  first-input-high-error-text='${args.firstInputHighErrorText}'
+  second-input-label='${args.secondInputLabel}'
+  second-input-placeholder='${args.secondInputPlaceholder}'
+  second-input-min='${args.secondInputMin}'
+  second-input-max='${args.secondInputMax}'
+  second-input-warning='${args.secondInputWarning}'
+  second-input-warning-text='${args.secondInputWarningText}'
+  second-input-low-error-text='${args.secondInputLowErrorText}'
+  second-input-high-error-text='${args.secondInputHighErrorText}'
+  date-label='${args.dateLabel}'
+  date-placeholder='${args.datePlaceholder}'
+  date-days-from-today='${args.dateDaysFromToday}'
+  years-to-add-to-end-date='${args.yearsToAddToEndDate}'
+  sum-field-label='${args.sumFieldLabel}'
+  add-row-text='${args.addRowText}'
+  element-helper-text='${args.elementHelperText}'
+  >
+  </pn-dropdown-with-multi-input-rows>
+        `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  dropdownData: '[{"caption": "Option1", "value": 4, "checked": false}, {"caption": "Option2", "value": 8, "checked": false}]',
+  languageCode: 'en',
+  firstDropdownLabel: 'dropdown1',
+  firstDropdownHelperText: 'dropdown1 help',
+  secondDropdownLabel: 'dropdown2',
+  secondDropdownHelperText: 'dropdown2 help',
+  secondDropdownMax: 53,
+  deleteMultipleRowsWarningText: 'Når du ændrer Antal Udgivelser til et lavere antal end først valgt, skal du være opmærksom på at allerede indtastede indleveringer slettes',
+  confirmDeleteButtonText: 'Slet',
+  abortDeleteButtonText: 'Fortryd',
+  fristInputLabel: 'first input',
+  fristInputPlaceholder: 'amount',
+  firstInputMin: 500,
+  firstInputMax: 2000000,
+  firstInputWarning: 1500,
+  firstInputWarningText: 'Antal er pr indlevering skal være på minimum 1500 stk. eller der skal betales op til minimum',
+  firstInputLowErrorText: 'Du kan ikke indlevere under 500 stk.',
+  firstInputHighErrorText: 'Du kan ikke indlevere over 2000000 stk.',
+  secondInputLabel: 'second input',
+  secondInputPlaceholder: 'amount',
+  secondInputMin: 0,
+  secondInputMax: 2000,
+  secondInputWarning: 60,
+  secondInputWarningText: 'Bemærk der betales for mindst 60 gram, uanset vægt',
+  secondInputLowErrorText: '',
+  secondInputHighErrorText: 'Forkert vægt max. 2000',
+  dateLabel: 'date',
+  datePlaceholder: 'YYYY-MM-DD',
+  dateDaysFromToday: 1,
+  yearsToAddToEndDate: 2,
+  sumFieldLabel: 'Sum',
+  addRowText: 'Add Row',
+  elementHelperText: 'Helpful text',
+};

package/collection/components/input/pn-dropdown-with-multi-input-rows/types.js

@@ -0,0 +1 @@
+export {};

package/collection/components/input/pn-multiple-input/pn-multiple-input.css

@@ -0,0 +1,16 @@
+pn-multiple-input .multiple-input-generated-row,
+pn-multiple-input .multiple-input-row {
+  display: flex;
+  gap: 1rem;
+}
+pn-multiple-input .multiple-input-generated-row pn-marketweb-input,
+pn-multiple-input .multiple-input-row pn-marketweb-input {
+  width: 100%;
+}
+pn-multiple-input .multiple-input-slot {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}

package/collection/components/input/pn-multiple-input/pn-multiple-input.js

@@ -0,0 +1,185 @@
+import { h, Host } from '@stencil/core';
+import { v4 as uuidv4 } from 'uuid';
+import { debounce } from 'debounce';
+export class PnMultipleInput {
+  constructor() {
+    this.pnSlotElement = null;
+    this._formValues = [];
+    this.label = null;
+    this.placeholder = null;
+    this.addRowButtonText = null;
+    this.rowData = [];
+  }
+  componentWillLoad() {
+    const elemtnId = this.generateUniqueId();
+    const newRow = { id: elemtnId, input: '' };
+    this.rowData = [...this.rowData, newRow];
+  }
+  componentDidLoad() {
+    this.addEventHandlers();
+  }
+  componentDidUpdate() {
+    this.addEventHandlers();
+  }
+  addEventHandlers() {
+    const rows = this.pnSlotElement.querySelectorAll('pn-marketweb-input');
+    rows.forEach(element => {
+      element.addEventListener('keyup', debounce(this.handleInput.bind(this), 500));
+    });
+  }
+  generateUniqueId() {
+    return uuidv4();
+  }
+  deleteRow(indexToRemove) {
+    if (indexToRemove < 0) {
+      return;
+    }
+    this.rowData.splice(indexToRemove, 1);
+    this.rowData = [...this.rowData];
+    this.emitValues();
+  }
+  addRow() {
+    const newRow = { id: this.generateUniqueId(), input: '' };
+    this.rowData = [...this.rowData, newRow];
+    this.emitValues();
+  }
+  handleInput(e) {
+    const target = e.target;
+    const inputElm = target.closest('pn-marketweb-input');
+    if (!inputElm) {
+      return;
+    }
+    const inputElmId = inputElm.id;
+    const value = target.value;
+    const index = this.rowData.findIndex(item => item.id === inputElmId);
+    if (index < 0) {
+      return;
+    }
+    this.rowData[index] = Object.assign(Object.assign({}, this.rowData[index]), { input: value });
+    this.emitValues();
+  }
+  emitValues() {
+    this._formValues = [];
+    const label = this.label ? this.label : 'InputField';
+    this.rowData.forEach(item => {
+      const rowValue = { row: [] };
+      if (item.input) {
+        const dropDownValue = { name: label, value: item.input };
+        rowValue.row.push(dropDownValue);
+      }
+      if (rowValue.row.length === 1) {
+        this._formValues.push(rowValue);
+      }
+    });
+    if (this._formValues.length === this.rowData.length) {
+      const valueJsonString = JSON.stringify(this._formValues);
+      this.allFormValues.emit(valueJsonString);
+    }
+    else {
+      this.allFormValues.emit('');
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("div", { ref: el => (this.pnSlotElement = el), class: "multiple-input-slot" }, (_a = this.rowData) === null || _a === void 0 ? void 0 : _a.map((data, i) => {
+      return (h("div", { class: "multiple-input-generated-row" }, h("pn-marketweb-input", { label: this.label, type: "text", placeholder: this.placeholder, value: data.input, id: data.id }), i > 0 ? (h("pn-button", { "icon-only": true, "aria-label": "Delete", icon: "minus", appearance: "warning", onClick: () => {
+          this.deleteRow(i);
+        }, index: i, id: data.id }, "Delete")) : null));
+    })), h("dvi", { class: "multiple-input-row" }, h("pn-button", { "icon-only": this.addRowButtonText ? false : true, "left-icon": "true", "aria-label": "Add", icon: "plus", appearance: "light", variant: "borderless", class: "connected-dropdown__button-right", onClick: () => {
+        this.addRow();
+      } }, this.addRowButtonText))));
+  }
+  static get is() { return "pn-multiple-input"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-multiple-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-multiple-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "addRowButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "add-row-button-text",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "rowData": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "allFormValues",
+        "name": "allFormValues",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/input/pn-multiple-input/pn-multiple-input.stories.js

@@ -0,0 +1,24 @@
+import readme from './readme.md';
+
+export default {
+  title: 'input/Multiple Input',
+  parameters: {
+    notes: readme,
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `<pn-multiple-input
+    label='${args.label}'
+    placeholder='${args.placeholder}'
+    add-row-button-text='${args.addRowButtonText}'
+    >
+    </pn-multiple-input>`;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: 'label',
+  placeholder: 'placeholder',
+  addRowButtonText: 'add',
+};

package/collection/components/input/pn-multiple-input/types.js

@@ -0,0 +1 @@
+export {};

package/components/index.d.ts

@@ -8,10 +8,13 @@ export { PnBreakpoints as PnBreakpoints } from '../types/components/utilities/pn
 export { PnChart as PnChart } from '../types/components/charts/pn-chart/pn-chart';
 export { PnChartsCard as PnChartsCard } from '../types/components/charts/pn-charts-card/pn-charts-card';
 export { PnChoiceButton as PnChoiceButton } from '../types/components/input/pn-choice-button/pn-choice-button';
+export { PnCtaBlock as PnCtaBlock } from '../types/components/cta/pn-cta-block/pn-cta-block';
 export { PnCustomernumberSelector as PnCustomernumberSelector } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector';
 export { PnProfileSelectorOption as PnCustomernumberSelectorOption } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector-option';
 export { PnDateAndTime as PnDateAndTime } from '../types/components/input/pn-date-and-time/pn-date-and-time';
 export { pnDropdownChoiceAddsRow as PnDropdownChoiceAddsRow } from '../types/components/input/pn-dropdown-choice-adds-row/pn-dropdown-choice-adds-row';
+export { PnDropdownWithMultiInputRows as PnDropdownWithMultiInputRows } from '../types/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows';
+export { PnDropdownWithMultiInputRowsRow as PnDropdownWithMultiInputRowsRow } from '../types/components/input/pn-dropdown-with-multi-input-rows/pn-dropdown-with-multi-input-rows-row';
 export { PnFilterCheckbox as PnFilterCheckbox } from '../types/components/input/pn-filter-checkbox/pn-filter-checkbox';
 export { PnfindPrice as PnFindPrice } from '../types/components/widgets/pn-find-price/pn-find-price';
 export { PnfindPriceResult as PnFindPriceResult } from '../types/components/widgets/pn-find-price/pn-find-price-result';
@@ -39,6 +42,7 @@ export { PnMarketwebSiteheaderUnifiedLogin as PnMarketwebSiteheaderUnifiedLogin
 export { PnMultiFormField as PnMultiFormfield } from '../types/components/input/pn-multi-formfield/pn-multi-formfield';
 export { PnMultiRowConnectedDropdown as PnMultiRowConnectedDropdown } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown';
 export { PnMultiRowConnectedDropdownRow as PnMultiRowConnectedDropdownRow } from '../types/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row';
+export { PnMultipleInput as PnMultipleInput } from '../types/components/input/pn-multiple-input/pn-multiple-input';
 export { PnSpotlight as PnParcelTracker } from '../types/components/cta/pn-parcel-tracker/pn-parcel-tracker';
 export { PnPexPricefinder as PnPexPricefinder } from '../types/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder';
 export { PnPlayOnScroll as PnPlayOnScroll } from '../types/components/animation/pn-play-on-scroll/pn-play-on-scroll';

package/components/index.js

@@ -8,10 +8,13 @@ export { PnBreakpoints, defineCustomElement as defineCustomElementPnBreakpoints
 export { PnChart, defineCustomElement as defineCustomElementPnChart } from './pn-chart.js';
 export { PnChartsCard, defineCustomElement as defineCustomElementPnChartsCard } from './pn-charts-card.js';
 export { PnChoiceButton, defineCustomElement as defineCustomElementPnChoiceButton } from './pn-choice-button.js';
+export { PnCtaBlock, defineCustomElement as defineCustomElementPnCtaBlock } from './pn-cta-block.js';
 export { PnCustomernumberSelector, defineCustomElement as defineCustomElementPnCustomernumberSelector } from './pn-customernumber-selector.js';
 export { PnCustomernumberSelectorOption, defineCustomElement as defineCustomElementPnCustomernumberSelectorOption } from './pn-customernumber-selector-option.js';
 export { PnDateAndTime, defineCustomElement as defineCustomElementPnDateAndTime } from './pn-date-and-time.js';
 export { PnDropdownChoiceAddsRow, defineCustomElement as defineCustomElementPnDropdownChoiceAddsRow } from './pn-dropdown-choice-adds-row.js';
+export { PnDropdownWithMultiInputRows, defineCustomElement as defineCustomElementPnDropdownWithMultiInputRows } from './pn-dropdown-with-multi-input-rows.js';
+export { PnDropdownWithMultiInputRowsRow, defineCustomElement as defineCustomElementPnDropdownWithMultiInputRowsRow } from './pn-dropdown-with-multi-input-rows-row.js';
 export { PnFilterCheckbox, defineCustomElement as defineCustomElementPnFilterCheckbox } from './pn-filter-checkbox.js';
 export { PnFindPrice, defineCustomElement as defineCustomElementPnFindPrice } from './pn-find-price.js';
 export { PnFindPriceResult, defineCustomElement as defineCustomElementPnFindPriceResult } from './pn-find-price-result.js';
@@ -39,6 +42,7 @@ export { PnMarketwebSiteheaderUnifiedLogin, defineCustomElement as defineCustomE
 export { PnMultiFormfield, defineCustomElement as defineCustomElementPnMultiFormfield } from './pn-multi-formfield.js';
 export { PnMultiRowConnectedDropdown, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdown } from './pn-multi-row-connected-dropdown.js';
 export { PnMultiRowConnectedDropdownRow, defineCustomElement as defineCustomElementPnMultiRowConnectedDropdownRow } from './pn-multi-row-connected-dropdown-row.js';
+export { PnMultipleInput, defineCustomElement as defineCustomElementPnMultipleInput } from './pn-multiple-input.js';
 export { PnParcelTracker, defineCustomElement as defineCustomElementPnParcelTracker } from './pn-parcel-tracker.js';
 export { PnPexPricefinder, defineCustomElement as defineCustomElementPnPexPricefinder } from './pn-pex-pricefinder.js';
 export { PnPlayOnScroll, defineCustomElement as defineCustomElementPnPlayOnScroll } from './pn-play-on-scroll.js';

package/components/pn-cta-block.d.ts

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

package/components/pn-cta-block.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnCtaBlockCss = "pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#EFFBFF}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#FDEFEE}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#F9F8F8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#EDFBF3}pn-cta-block .cta-block--content-top .cta-block__content{-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{margin-right:auto;margin-left:auto;width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{max-width:75%}}pn-cta-block .cta-block--center{-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:1.6rem;padding:3.2rem 2.4rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{-ms-flex-direction:row;flex-direction:row;gap:2.4rem;margin-top:1.6rem}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{-ms-flex-direction:row;flex-direction:row;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading{max-width:74rem}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{max-width:74rem}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:-ms-flexbox;display:flex}pn-cta-block .cta-block__action>[slot=cta-button]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;row-gap:1.6rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-button]{gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-button]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-button]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-button]>a pn-icon svg path{fill:#005D92}pn-cta-block .cta-block__action>[slot=cta-button]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-button]>a:hover pn-icon svg path{fill:#005D92}";
+
+const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.heading = null;
+    this.bodyText = null;
+    this.pnBackgroundColor = null;
+    this.isLarge = false;
+    this.isCentered = false;
+    this.isSmall = false;
+    this.contentTop = false;
+    this.hasIllustrationSlot = true;
+    this.hasButtonSlot = true;
+  }
+  componentWillLoad() {
+    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
+    this.hasButtonSlot = !!this.hostElement.querySelector('[slot="cta-button"]');
+  }
+  render() {
+    return (h(Host, null, h("div", { "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })), h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)), h("div", { class: "cta-block__action" }, h("slot", { name: "cta-button" })))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnCtaBlockCss; }
+}, [4, "pn-cta-block", {
+    "heading": [1],
+    "bodyText": [1, "body-text"],
+    "pnBackgroundColor": [1, "pn-background-color"],
+    "isLarge": [4, "is-large"],
+    "isCentered": [4, "is-centered"],
+    "isSmall": [4, "is-small"],
+    "contentTop": [4, "content-top"],
+    "hasIllustrationSlot": [32],
+    "hasButtonSlot": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-cta-block"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-cta-block":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnCtaBlock$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnCtaBlock = PnCtaBlock$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnCtaBlock, defineCustomElement };

package/components/pn-dropdown-with-multi-input-rows-row.d.ts

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

package/components/pn-dropdown-with-multi-input-rows-row.js

@@ -0,0 +1,6 @@
+import { P as PnDropdownWithMultiInputRowsRow$1, d as defineCustomElement$1 } from './pn-dropdown-with-multi-input-rows-row2.js';
+
+const PnDropdownWithMultiInputRowsRow = PnDropdownWithMultiInputRowsRow$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnDropdownWithMultiInputRowsRow, defineCustomElement };