@postnord/web-components
Version:
PostNord Web Components
221 lines (220 loc) • 8.98 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host, forceUpdate, transformTag } from "@stencil/core";
import { arrow_left, arrow_right } from "pn-design-assets/pn-assets/icons.js";
/**
* The `pn-segmented-control` and `pn-segmented` is built with native `input[type="radio"]` in the background.
* This means you can use native events to listen to the changes.
*
* @nativeChange Use the `change` event to listen when the segment state is being changed.
*/
export class PnSegmentedControl {
mo;
segmentContainer;
segments = [];
activeBg;
hoverBg;
scrollRegistered = false;
hostElement;
showScrollArrows = false;
showLeftArrow = false;
showRightArrow = false;
/** This is the name of the radio buttons inside the controller. @deprecated Set the name in the nested `pn-segment` components. */
name;
/** Currently active segment value. */
value;
valueHandler() {
this.setActiveSegment();
}
changeHandler(event) {
const target = event.target;
this.value = target.value;
this.setActiveSegment();
}
handleResize() {
this.rerender();
}
handleHover(event) {
const { target } = event.detail;
this.calcHighlight(target, true);
}
connectedCallback() {
this.mo = new MutationObserver(() => {
forceUpdate(this.hostElement);
this.setSegments();
});
this.mo.observe(this.hostElement, { childList: true, subtree: true });
}
disconnectedCallback() {
if (this.mo)
this.mo.disconnect();
}
componentDidLoad() {
this.setSegments();
}
setSegments() {
const segmentTag = transformTag('pn-segment');
const list = this.hostElement.querySelectorAll(segmentTag);
this.segments = Array.from(list);
this.setActiveSegment();
}
setActiveSegment() {
this.segments.forEach(segmentEl => {
if (this.value === segmentEl.value)
segmentEl.setAttribute('selected', 'true');
else
segmentEl.removeAttribute('selected');
});
this.rerender();
}
rerender() {
requestAnimationFrame(() => {
this.calcHighlight();
this.scrollArrowRender();
});
}
/*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/
calcHighlight(element, hover) {
const chip = hover ? this.hoverBg : this.activeBg;
requestAnimationFrame(() => {
const el = element || this.segments.find(({ value }) => value === this.value);
const segmentTag = transformTag('pn-segment');
const elSegment = el?.closest(segmentTag);
if (!elSegment)
return;
const elRect = elSegment.getBoundingClientRect();
const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
const offset = segmentLeft - hostLeft + this.segmentContainer.scrollLeft;
chip.style.setProperty('transform', `translate(${offset}px, -50%`);
chip.style.setProperty('width', `${segmentWidth}px`);
chip.style.setProperty('height', `${segmentHeight}px`);
el.disabled ? (chip.dataset.disabled = '') : delete chip.dataset.disabled;
});
}
/*---------------------------------------/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;
}
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',
});
}
/*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
render() {
return (h(Host, { key: 'e50018a767b5280ce0144544f3fb213b8f025944' }, h("div", { key: '8f9f4beedc7b07d2431fde84456a96d501bdbf15', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '1caffca6e2cd27adcb2c5bfa5b45f52043c85829' }), h("div", { key: '3ef184c6e26f194aa3b5e3ef284313f73aa03a6e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '90c56a3f631557e062f70b4ef98231eafc1f46d7', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '371d10511a314e69613a195858dba3073f7ca920', class: "pn-sc-arrows", "data-left": this.showLeftArrow, "data-right": this.showRightArrow, hidden: !this.showScrollArrows }, h("button", { key: 'e698d859b989e8fde8864185d3fdce81584280da', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'e82f3b0257bd48dc281a6c113cecbd0cb551fd53', icon: arrow_left })), h("button", { key: '8eba509c3c48304c372d543e51edecaaf41cf564', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '0ed1d7cd2b88a619f21e2ee8075c864f9bdcf561', icon: arrow_right })))));
}
static get is() { return "pn-segmented-control"; }
static get originalStyleUrls() {
return {
"$": ["pn-segmented-control.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-segmented-control.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "deprecated",
"text": "Set the name in the nested `pn-segment` components."
}],
"text": "This is the name of the radio buttons inside the controller."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Currently active segment value."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value"
}
};
}
static get states() {
return {
"showScrollArrows": {},
"showLeftArrow": {},
"showRightArrow": {}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "value",
"methodName": "valueHandler"
}];
}
static get listeners() {
return [{
"name": "change",
"method": "changeHandler",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "resize",
"method": "handleResize",
"target": "window",
"capture": false,
"passive": true
}, {
"name": "segmentHover",
"method": "handleHover",
"target": undefined,
"capture": false,
"passive": false
}];
}
}