@postnord/web-components
Version:
PostNord Web Components
168 lines (163 loc) • 10.3 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
import { a as arrow_left } from './arrow_left.js';
import { a as arrow_right } from './arrow_right.js';
import { d as defineCustomElement$2 } from './pn-icon2.js';
const pnSegmentedControlCss = "pn-segmented-control{position:relative;display:inline-block;max-width:100%;overflow:hidden;border-radius:3em;transform:translateZ(0);transition-property:outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);outline:0.2rem solid transparent;outline-offset:0.2rem}pn-segmented-control:focus-within,pn-segmented-control:active{outline-color:#005d92}pn-segmented-control .pn-segmented-control{display:flex;align-items:center;border-radius:3em;min-height:3em;padding:0.25em;background:#f3f2f2;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}pn-segmented-control .pn-segmented-control:hover .pn-sc-bg[data-hover]{opacity:1}pn-segmented-control .pn-segmented-control::-webkit-scrollbar{display:none}pn-segmented-control .pn-segmented-control .pn-sc-bg{position:absolute;top:50%;transform:translateY(-50%);will-change:transform;left:0;border-radius:inherit;transition-property:width, transform, background-color, opacity, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-active]{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.0625em solid #005d92;background-color:#ffffff;z-index:1}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-hover]{background-color:#e0f8ff;opacity:0;border:0.25em solid transparent;z-index:0}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-hover][data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}pn-segmented-control .pn-segmented-control .pn-sc-bg[data-disabled]{border-color:#e9e6e5;background-color:#e9e6e5}pn-segmented-control .pn-sc-arrows{position:absolute;top:50%;transform:translateY(-50%);left:0;height:100%;width:100%;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}pn-segmented-control .pn-sc-arrows svg{width:1.5em}pn-segmented-control .pn-sc-arrows svg.pn-icon-svg path{fill:#005d92}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow{cursor:pointer;pointer-events:all;width:2.5em;height:2.5em;background:#ffffff;border:none;outline:none;display:flex;align-items:center;justify-content:center;opacity:0;will-change:transform;-webkit-tap-highlight-color:transparent;transition-property:transform, opacity, background-color, box-shadow;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-left{transform:translateX(-100%);border-radius:0 50% 50% 0;padding:0 0.3em 0 0;box-shadow:0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4)}pn-segmented-control .pn-sc-arrows>.pn-sc-arrow.pn-sc-arrow-right{transform:translateX(100%);border-radius:50% 0 0 50%;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;transform:translateX(0)}";
const PnSegmentedControlStyle0 = pnSegmentedControlCss;
const PnSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class PnSegmentedControl extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.showScrollArrows = false;
this.showLeftArrow = false;
this.showRightArrow = false;
this.name = undefined;
this.value = undefined;
}
mo;
segmentContainer;
segments = [];
activeBg;
hoverBg;
scrollRegistered = false;
get hostElement() { return this; }
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);
}
componentDidLoad() {
if (this.mo)
this.mo.disconnect();
this.mo = new MutationObserver(() => {
forceUpdate(this.hostElement);
this.setSegments();
});
this.mo.observe(this.hostElement, { childList: true });
this.setSegments();
}
setSegments() {
this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));
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 elSegment = el?.closest('pn-segment');
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;
return;
}
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() {
const list = ['pn-sc-arrows'];
if (this.showLeftArrow)
list.push('pn-sc-left-visible');
if (this.showRightArrow)
list.push('pn-sc-right-visible');
return list.join(' ');
}
/*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
render() {
return (h(Host, { key: 'e9ae7b8a52027c3a16b75e57097cf8c9de5f6ac2' }, h("div", { key: 'f29c57449726a72c699bd76652742f875c518c9f', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '253edcfe5d9171dcd5ea833b254f7ac5deba7f31' }), h("div", { key: '9b6a8a0194ffff718ec96bf5c490a4dc8a78cb06', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '23c5e00d3b05795f52dc6ae92b6feade51592d13', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: 'e8b85e3c05f9afa18937c7356f1db5110155c9de', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: '84ebd54950d98d5ceca770a0095e95fe8c2597d0', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: '100859353d859924ab2de1028deb12deab09a8a8', icon: arrow_left })), h("button", { key: '9a739b38b210fb26b12b68c139c373eee439139c', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '861a4d87897175100157a3af3ed7d5699206c153', icon: arrow_right })))));
}
static get watchers() { return {
"value": ["valueHandler"]
}; }
static get style() { return PnSegmentedControlStyle0; }
}, [4, "pn-segmented-control", {
"name": [1],
"value": [1025],
"showScrollArrows": [32],
"showLeftArrow": [32],
"showRightArrow": [32]
}, [[0, "change", "changeHandler"], [9, "resize", "handleResize"], [0, "segmentHover", "handleHover"]], {
"value": ["valueHandler"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["pn-segmented-control", "pn-icon"];
components.forEach(tagName => { switch (tagName) {
case "pn-segmented-control":
if (!customElements.get(tagName)) {
customElements.define(tagName, PnSegmentedControl$1);
}
break;
case "pn-icon":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const PnSegmentedControl = PnSegmentedControl$1;
const defineCustomElement = defineCustomElement$1;
export { PnSegmentedControl, defineCustomElement };
//# sourceMappingURL=pn-segmented-control.js.map