@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
91 lines (90 loc) • 3.79 kB
JavaScript
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
import { h } from "@stencil/core";
/**
* Checks if an element has `flex-wrap: wrap` and the content wraps over multiple lines
*/
const hasFlexboxWrap = (el) => {
var _a;
const win = (_a = el === null || el === void 0 ? void 0 : el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
const style = win === null || win === void 0 ? void 0 : win.getComputedStyle(el);
if (style && style.getPropertyValue('flex-wrap') === 'wrap' && style.getPropertyValue('display') === 'flex') {
// TODO: Account for writing-mode vertical
return el.firstElementChild.getBoundingClientRect().top !== el.lastElementChild.getBoundingClientRect().top;
}
else {
return false;
}
};
export class FlexWrapFallback {
constructor() {
this.flexTarget = undefined;
this.resizeObserver = undefined;
this.contentWraps = undefined;
}
connectedCallback() {
if (!this.resizeObserver) {
this.resizeObserver = new ResizeObserver(() => {
// TODO: Support updating `flextarget` attribute, switch ResizeObserver to match
// TODO: Escape ID selector CSS query
const cssSelector = this.flexTarget ? `#${this.flexTarget}` : ':not([slot])';
const flexTargetEl = this.hostElement.querySelector(cssSelector);
console.log(cssSelector, flexTargetEl);
this.contentWraps = !!flexTargetEl && hasFlexboxWrap(flexTargetEl);
});
}
this.resizeObserver.observe(this.hostElement);
}
disconnectedCallback() {
var _a;
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(this.hostElement);
}
render() {
const { contentWraps } = this;
return (h("div", { key: '83c37023b9eecc8342d773fb0721770818958a94' }, h("div", { key: 'd185afc26a559f452471e6183a3aa9c4302e16f7', id: "wrap", class: `utrecht-flex-wrap-fallback__content ${contentWraps ? 'utrecht-flex-wrap-fallback__content--hidden' : ''}`, "data-inert": contentWraps, "aria-hidden": contentWraps }, h("slot", { key: '2d52827e5edea6a076c3846235ade554bf619cb9' })), h("div", { key: 'c0e3c32a24784bdd64063d28098a3865fc36af88', id: "nowrap", class: `utrecht-flex-wrap-fallback__fallback ${contentWraps ? '' : 'utrecht-flex-wrap-fallback__fallback--hidden'}`, "data-inert": !contentWraps, hidden: !contentWraps }, h("slot", { key: '3eecdfa3acc7a69c0bdf2fde8a9539c746689392', name: "fallback" }))));
}
static get is() { return "utrecht-flex-wrap-fallback"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["flex-wrap-fallback.scss"]
};
}
static get styleUrls() {
return {
"$": ["flex-wrap-fallback.css"]
};
}
static get properties() {
return {
"flexTarget": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"attribute": "flextarget",
"reflect": true
}
};
}
static get states() {
return {
"resizeObserver": {},
"contentWraps": {}
};
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=flex-wrap-fallback.js.map