@postnord/pn-marketweb-components 2.0.3-beta4 → 2.0.5

package/umd/modules/@postnord/web-components/esm/pn-progress-indicator-step.entry.js

@@ -0,0 +1,52 @@
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-1b1c55fe.js';
+
+const pnProgressIndicatorStepCss = "pn-progress-indicator-step{display:-ms-flexbox;display:flex;-ms-flex:1 0 4em;flex:1 0 4em}pn-progress-indicator-step:first-child{-ms-flex:0 0 auto;flex:0 0 auto}pn-progress-indicator-step:first-child .progress-line{display:none}pn-progress-indicator-step:first-child .info-container{-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 0 4em;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#F3F2F2;-webkit-transition:background-color 0.3s ease-in-out;transition:background-color 0.3s ease-in-out}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;-webkit-transform:translateX(50%) translateX(-1.2rem);transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#F3F2F2;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-webkit-transition:color 0.3s ease-in-out;transition:color 0.3s ease-in-out;font-size:1em;font-weight:normal}.pn-progress-indicator-step .info-container svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container svg path,.pn-progress-indicator-step .info-container svg polygon{fill:#F3F2F2;-webkit-transition:fill 0.3s ease-in-out;transition:fill 0.3s ease-in-out}.pn-progress-indicator-step .progress-line{-ms-flex:1 1 auto;flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#F3F2F2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:\"\";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005D92;-webkit-transition:-webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:-webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s, -webkit-transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.pn-progress-indicator-step.active .info-container{color:black}.pn-progress-indicator-step.active .info-container svg path{fill:#000}.pn-progress-indicator-step.active .info-container svg polygon{fill:#000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{-webkit-transform:translateX(0);transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005D92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;-webkit-animation:dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both;animation:dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both}@-webkit-keyframes dash{to{stroke-dashoffset:0}}@keyframes dash{to{stroke-dashoffset:0}}";
+
+let PnProgressIndicatorStep = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.setactivestep = createEvent(this, "setactivestep", 7);
+  }
+  setActiveStepHandler() {
+    if (this.done || this.activated) {
+      this.setactivestep.emit(this.index);
+    }
+  }
+  componentWillLoad() {
+    this.checkStatus();
+  }
+  componentDidUpdate() {
+    this.checkStatus();
+  }
+  checkStatus() {
+    if (!this.done) {
+      this.done = this.checked || this.activeStep > this.index;
+    }
+    if (this.active === "yes") {
+      this.activated = true;
+    }
+    else if (this.active === "no") {
+      this.activated = false;
+      this.done = false;
+    }
+    else if (!this.activated) {
+      this.activated = this.activeStep >= this.index;
+    }
+  }
+  getClassNames() {
+    let className = "pn-progress-indicator-step";
+    if (this.done || this.checked)
+      className += " done";
+    if (this.activated)
+      className += " activated";
+    if (this.activeStep === this.index)
+      className += " active";
+    return className;
+  }
+  render() {
+    return (h(Host, { class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { class: "progress-line" }), h("div", { class: "info-container" }, h("slot", null), this.name), h("div", { class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: "#FFF", "stroke-miterlimit": "10", "stroke-width": "3" }))) : (""))));
+  }
+};
+PnProgressIndicatorStep.style = pnProgressIndicatorStepCss;
+
+export { PnProgressIndicatorStep as pn_progress_indicator_step };

package/umd/modules/@postnord/web-components/esm/pn-progress-indicator.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1b1c55fe.js';
+
+const pnProgressIndicatorCss = ".pn-progress-indicator{display:-ms-flexbox;display:flex;padding:2.8em 1em 0}";
+
+let PnProgressIndicator = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.progresschange = createEvent(this, "progresschange", 7);
+    /** Takes the index of the active step */
+    this.activeStep = 0;
+  }
+  setActiveStepHandler({ detail }) {
+    this.activeStep = detail;
+    this.progresschange.emit(this.activeStep);
+  }
+  componentWillLoad() {
+    this.passPropsToChildren();
+  }
+  componentDidUpdate() {
+    this.passPropsToChildren();
+  }
+  passPropsToChildren() {
+    let children = Array.from(this.hostElement.querySelectorAll("pn-progress-indicator-step"));
+    children.forEach((child, i) => {
+      child.activeStep = this.activeStep;
+      child.index = i;
+    });
+  }
+  render() {
+    return (h("div", { class: "pn-progress-indicator" }, h("slot", null)));
+  }
+  get hostElement() { return getElement(this); }
+};
+PnProgressIndicator.style = pnProgressIndicatorCss;
+
+export { PnProgressIndicator as pn_progress_indicator };

package/umd/modules/@postnord/web-components/esm/pn-radio-button.entry.js

@@ -0,0 +1,17 @@
+import { r as registerInstance, h, a as Host } from './index-1b1c55fe.js';
+
+const pnRadioButtonCss = "pn-radio-button{}pn-radio-button input[type=radio]{opacity:0;position:absolute;white-space:nowrap;pointer-events:none}pn-radio-button input[type=radio]+label{display:inline-block;cursor:pointer;}pn-radio-button input[type=radio]+label .pn-radio-outer{background:#fff;border:0.1em solid #D3CECB;border-radius:50%;height:1.5em;width:1.5em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s, -webkit-box-shadow 0.1s;cursor:pointer}pn-radio-button input[type=radio]+label .pn-radio-inner{-webkit-transform:scale(0);transform:scale(0);height:1em;width:1em;background-color:#005D92;border-radius:50%;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92), -webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}pn-radio-button input[type=radio]:checked+label .pn-radio-inner{-webkit-transform:scale(1);transform:scale(1)}pn-radio-button input[type=radio]:checked+label .pn-radio-outer{border:0.1rem solid #005D92}pn-radio-button input[type=radio]:focus+label .pn-radio-outer,pn-radio-button input[type=radio]:active+label .pn-radio-outer{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92}pn-radio-button input[type=radio]:hover+label .pn-radio-outer{border:0.1rem solid #005D92;background:#E0F8FF}pn-radio-button input[type=radio]:disabled+label{cursor:not-allowed}pn-radio-button input[type=radio]:disabled+label .pn-radio-outer{cursor:not-allowed;border:0.1rem solid #969087;background-color:#D3CECB}pn-radio-button input[type=radio]:disabled+label .pn-radio-inner{cursor:not-allowed;background-color:#969087}pn-radio-button input[type=radio]:active:disabled+label .pn-radio-outer{-webkit-box-shadow:none;box-shadow:none}";
+
+let PnradioButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.disabled = false;
+    this.checked = false;
+  }
+  render() {
+    return (h(Host, null, h("input", { type: "radio", id: this.radioid || this.value, value: this.value, name: this.name, disabled: this.disabled, checked: this.checked }), h("label", { htmlFor: this.radioid || this.value }, h("div", { class: "pn-radio-outer" }, h("div", { class: "pn-radio-inner" })))));
+  }
+};
+PnradioButton.style = pnRadioButtonCss;
+
+export { PnradioButton as pn_radio_button };

package/umd/modules/@postnord/web-components/esm/pn-range-date-picker.entry.js

@@ -0,0 +1,110 @@
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-1b1c55fe.js';
+
+const pnRangeDatePickerCss = "pn-range-date-picker *,pn-range-date-picker *::before,pn-range-date-picker *::after{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box}pn-range-date-picker .weekday{font-size:0.7em;color:#969087}pn-range-date-picker .calendar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;-webkit-box-shadow:0 1em 2em rgba(0, 0, 0, 0.25);box-shadow:0 1em 2em rgba(0, 0, 0, 0.25);border-radius:0.5em;max-width:45em;max-height:90vh;overflow:auto}pn-range-date-picker .calendar h1{margin-bottom:0.5em}pn-range-date-picker [data-month]{padding-top:1.5em}pn-range-date-picker .month{font-size:1em;display:grid;padding:0.5em;grid-template-columns:repeat(7, 1fr);grid-gap:0.5em 0;background:#fff;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}pn-range-date-picker .day{padding:0.8em}pn-range-date-picker .day::before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}pn-range-date-picker .day[data-selected=start]::before,pn-range-date-picker .day[data-selected=end]::before,pn-range-date-picker .day[data-selected=single]::before{border-radius:50%;background-color:#00A0D6}pn-range-date-picker .day[data-selected=start]::before{border-top-right-radius:0;border-bottom-right-radius:0}pn-range-date-picker .day[data-selected=start],pn-range-date-picker .day[data-selected=end],pn-range-date-picker .day[data-selected=single]{color:white}pn-range-date-picker .day[data-selected=between]::before{background-color:#E0F8FF}pn-range-date-picker .day[data-selected=end][data-selected=end]::before{border-top-left-radius:0;border-bottom-left-radius:0}";
+
+let PnrangeDatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.dateselection = createEvent(this, "dateselection", 7);
+    /** Initialize with a selected start date, optional, defaults to current day */
+    this.startDate = new Date();
+    this.currentDate = new Date();
+    /** Initialize with a selected end date, optional, defaults to null */
+    this.endDate = null;
+    /** Only allow a single date and not a range, basic date picker */
+    this.single = false;
+    /** Initialize with a selected year, optional, defaults to current year */
+    this.year = new Date().getFullYear();
+    this.currentState = 'idle';
+    this.week = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+    this.months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    this.machine = {
+      initial: "idle",
+      states: {
+        idle: {
+          on: {
+            pointerdown: (payload) => {
+              const { year, month, day } = payload;
+              this.startDate = new Date(year, month, day);
+              this.endDate = null;
+              if (this.single) {
+                this.dateselection.emit(this.startDate);
+                return "idle";
+              }
+              return "dragging";
+            }
+          }
+        },
+        dragging: {
+          on: {
+            pointerover: (payload) => {
+              const { year, month, day } = payload;
+              const endDate = new Date(year, month, day);
+              this.endDate = endDate !== this.startDate ? endDate : null;
+              return "dragging";
+            },
+            pointerdown: () => {
+              this.dateselection.emit({ start: this.startDate, end: this.endDate });
+              return "idle";
+            },
+            pointercancel: "idle"
+          }
+        },
+      }
+    };
+  }
+  dateSelectionHandler({ detail }) {
+    console.log(detail);
+  }
+  send(payload, event) {
+    const transition = this.machine.states[this.currentState].on[event.type];
+    if (typeof transition === "function") {
+      this.currentState = transition(payload, event);
+    }
+    else if (transition) {
+      this.currentState = transition;
+    }
+  }
+  componentDidLoad() {
+    const date = this.startDate;
+    const year = date.getFullYear();
+    const month = this.months[date.getMonth()];
+    const monthEl = document.querySelector(`[data-year="${year}"] [data-month="${month}"]`);
+    monthEl.scrollIntoView();
+  }
+  calculateSelected(year, month, day) {
+    const checkDate = new Date(year, month, day);
+    const checkSelection = checkDate.getTime();
+    const firstDate = this.startDate.getTime();
+    const lastDate = this.endDate ? this.endDate.getTime() : null;
+    const startDate = Math.min(firstDate, lastDate);
+    const endDate = Math.max(firstDate, lastDate);
+    // Check if there is only one date selected
+    if (firstDate && !lastDate &&
+      checkDate.getFullYear() === this.startDate.getFullYear() &&
+      checkDate.getMonth() === this.startDate.getMonth() &&
+      checkDate.getDate() === this.startDate.getDate()) {
+      return 'single';
+    }
+    // Set data attr for items that are in the range but aren't start or end date
+    if (checkSelection > startDate && checkSelection < endDate && lastDate)
+      return 'between';
+    // Set data attr for start and end date of selected range
+    return checkSelection === endDate ? 'end' : checkSelection === startDate ? 'start' : null;
+  }
+  daysInMonth(month, year) {
+    // Get the amount of days of a specific month and create an array of that length
+    // so that we can loop over the days in the render function.
+    return Array.from({ length: new Date(year, month + 1, 0).getDate() }, (_, i) => i + 1);
+  }
+  calcWeekdayStart(year, month, day) {
+    const startDay = { 'grid-column-start': `${new Date(year, month, day).getDay()}` };
+    return day === 1 ? startDay : null;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "calendar" }, [this.year - 2, this.year - 1, this.year, this.year + 1].map(year => (h("div", { "data-year": year }, this.months.map((monthString, month) => (h("div", { "data-month": monthString }, h("h1", null, monthString, " - ", year), h("div", { class: "month" }, this.week.map(day => h("h2", { class: "weekday" }, day)), this.daysInMonth(month, year).map(day => (h("div", { class: "day", style: this.calcWeekdayStart(year, month, day), "data-day": day, "data-selected": this.calculateSelected(year, month, day), onPointerDown: (event) => this.send({ year, month, day }, event), onPointerOver: (event) => this.send({ year, month, day }, event) }, h("span", { class: "number" }, day))))))))))))));
+  }
+};
+PnrangeDatePicker.style = pnRangeDatePickerCss;
+
+export { PnrangeDatePicker as pn_range_date_picker };

package/umd/modules/@postnord/web-components/esm/pn-segment.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-1b1c55fe.js';
+
+const pnSegmentCss = "pn-segment{position:relative;color:#005D92;margin-right:0.5em;z-index:2;white-space:nowrap;scroll-snap-align:center;outline:none;-webkit-tap-highlight-color:transparent;-webkit-transform:translateZ(0);transform:translateZ(0)}pn-segment:last-of-type{margin-right:0}pn-segment input{margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}pn-segment label{height:100%;width:100%;padding:0.5em;border-radius:3em;border:0.1rem solid transparent;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-transition:background 0.15s, border 0.15s, color 0.15s, -webkit-box-shadow 0.15s 0.2s;transition:background 0.15s, border 0.15s, color 0.15s, -webkit-box-shadow 0.15s 0.2s;transition:background 0.15s, border 0.15s, box-shadow 0.15s 0.2s, color 0.15s;transition:background 0.15s, border 0.15s, box-shadow 0.15s 0.2s, color 0.15s, -webkit-box-shadow 0.15s 0.2s}pn-segment label>pn-icon{margin-right:0.5em}pn-segment label pn-icon svg path{-webkit-transition:fill 0.15s;transition:fill 0.15s}";
+
+let PnSegment = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { tabindex: "-1" }, h("input", { class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value }), h("label", { htmlFor: this.segmentid, class: "pn-segment-label" }, this.icon && h("pn-icon", { symbol: this.icon, color: "blue700" }), h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+};
+PnSegment.style = pnSegmentCss;
+
+export { PnSegment as pn_segment };

package/umd/modules/@postnord/web-components/esm/pn-segmented-control.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, f as forceUpdate, h, a as Host, g as getElement } from './index-1b1c55fe.js';
+
+const pnSegmentedControlCss = "pn-segmented-control{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;-webkit-transition:-webkit-box-shadow 0.15s;transition:-webkit-box-shadow 0.15s;transition:box-shadow 0.15s;transition:box-shadow 0.15s, -webkit-box-shadow 0.15s;-webkit-transform:translateZ(0);transform:translateZ(0)}.pn-segmented-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#F3F2F2;position:relative;overflow-x:auto;-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.pn-segmented-control::-webkit-scrollbar{display:none}.pn-segmented-control>.pn-sc-bg{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;-webkit-transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s;transition:width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s, -webkit-transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), -webkit-box-shadow 0.15s}.pn-segmented-control>.pn-sc-bg.pn-sc-active{-webkit-box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);box-shadow:0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);border:0.1rem solid #005D92;background:#FFFFFF;z-index:1}.pn-segmented-control>.pn-sc-bg.pn-sc-hover{background:#E0F8FF;opacity:0;border:0.5rem solid transparent;z-index:0}@media (hover: hover){.pn-segmented-control:hover .pn-sc-hover{opacity:1}}pn-segmented-control:focus-within,pn-segmented-control:active{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-segmented-control .pn-sc-arrows{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;pointer-events:none}pn-segmented-control .pn-sc-arrows svg{width:1.5em}pn-segmented-control .pn-sc-arrows svg path{fill:#005D92}pn-segmented-control .pn-sc-arrows>*{-webkit-transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:opacity 0.2s, background 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;transition:transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s, -webkit-transform 0.2s, -webkit-box-shadow 0.1s;pointer-events:all;width:2.5em;height:2.5em;background:white;border:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;cursor:pointer;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent}pn-segmented-control .pn-sc-arrows>*.pn-sc-arrow-left{-webkit-transform:translateX(-100%);transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;-webkit-box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows>*.pn-sc-arrow-right{-webkit-transform:translateX(100%);transform:translateX(100%);border-radius:50% 0 0 50%;padding:0 0 0 0.3em;-webkit-box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);box-shadow:-0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left,pn-segmented-control .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}";
+
+let PnSegmentedControl = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** This is the name of the radio buttons inside the controller */
+    this.name = 'example-id';
+    this.showScrollArrows = false;
+    this.showLeftArrow = false;
+    this.showRightArrow = false;
+    this.segments = [];
+    this.scrollRegistered = false;
+  }
+  changeHandler({ target }) {
+    this.value = target.value;
+    this.currentSelection = target.closest('pn-segment');
+  }
+  handleResize() {
+    this.rerender();
+  }
+  selectionHandler() {
+    this.rerender();
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      forceUpdate(this.hostElement);
+      this.setActiveSegment();
+      this.rerender();
+    });
+    mo.observe(this.hostElement, { childList: true });
+    this.segmentContainer = this.hostElement.querySelector('.pn-segmented-control');
+    this.activeBg = this.hostElement.querySelector('.pn-sc-active');
+    this.hoverBg = this.hostElement.querySelector('.pn-sc-hover');
+    this.hostElement.addEventListener('mouseover', ({ target }) => this.calcHighlight(target, this.hoverBg));
+    this.setActiveSegment();
+  }
+  setActiveSegment() {
+    this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));
+    this.segments.forEach(segmentEl => {
+      if (this.value === segmentEl.value) {
+        this.currentSelection = segmentEl;
+        segmentEl.setAttribute('selected', 'true');
+      }
+      segmentEl.setAttribute('name', this.name);
+    });
+  }
+  rerender() {
+    requestAnimationFrame(() => {
+      this.calcHighlight(this.currentSelection, this.activeBg);
+      this.scrollArrowRender();
+    });
+  }
+  /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/
+  calcHighlight(el, bgEl) {
+    if (!(el === null || el === void 0 ? void 0 : el.closest('pn-segment')))
+      return;
+    const elRect = el.closest('pn-segment').getBoundingClientRect();
+    const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
+    const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
+    const offset = (segmentLeft - hostLeft) + this.segmentContainer.scrollLeft;
+    bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);
+    bgEl.style.setProperty('width', `${segmentWidth}px`);
+    bgEl.style.setProperty('height', `${segmentHeight}px`);
+  }
+  /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/
+  /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/
+  scrollArrowRender() {
+    if (this.segmentContainer.scrollWidth > this.segmentContainer.clientWidth) {
+      this.showScrollArrows = true;
+      if (!this.scrollRegistered) {
+        this.segmentContainer.addEventListener('scroll', this.scrollArrowRender.bind(this));
+        this.scrollRegistered = true;
+      }
+      const amountScrolled = Math.round(this.segmentContainer.scrollWidth - this.segmentContainer.scrollLeft);
+      const distanceToEnd = amountScrolled - this.segmentContainer.clientWidth;
+      const distanceToStart = this.segmentContainer.scrollLeft;
+      this.showLeftArrow = distanceToStart > 0;
+      this.showRightArrow = distanceToEnd > 0;
+      return;
+    }
+    else {
+      this.showLeftArrow = false;
+      this.showRightArrow = false;
+      this.showScrollArrows = false;
+    }
+  }
+  scroll(val) {
+    let amount = this.segmentContainer.scrollLeft + val;
+    this.segmentContainer.scroll({
+      left: amount,
+      behavior: "smooth"
+    });
+  }
+  scrollArrowClasses() {
+    let classNames = 'pn-sc-arrows ';
+    if (this.showLeftArrow)
+      classNames += 'pn-sc-left-visible ';
+    if (this.showRightArrow)
+      classNames += 'pn-sc-right-visible ';
+    return classNames;
+  }
+  /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
+  render() {
+    return (h(Host, null, h("div", { class: "pn-segmented-control" }, h("slot", null), h("div", { class: "pn-sc-bg pn-sc-active" }), h("div", { class: "pn-sc-bg pn-sc-hover" })), this.showScrollArrows &&
+      h("div", { class: this.scrollArrowClasses() }, h("button", { class: "pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.414 12l7.293-7.293-1.414-1.414L6.586 12l8.707 8.707 1.414-1.414L9.414 12z" }))), h("button", { class: "pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.707 3.293L17.414 12l-8.707 8.707-1.414-1.414L14.586 12 7.293 4.707l1.414-1.414z" }))))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "currentSelection": ["selectionHandler"]
+  }; }
+};
+PnSegmentedControl.style = pnSegmentedControlCss;
+
+export { PnSegmentedControl as pn_segmented_control };