@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
77 lines (72 loc) • 3.92 kB
JavaScript
import { p as proxyCustomElement, H, h } from './p-2f0ff193.js';
const flexWrapFallbackCss = ":host{display:block}:host([hidden]){display:none !important}.utrecht-flex-wrap-fallback__content--hidden,.utrecht-flex-wrap-fallback__fallback--hidden{block-size:0;opacity:0%;outline:0;overflow:hidden;pointer-events:none;position:relative;user-select:none}";
const UtrechtFlexWrapFallbackStyle0 = flexWrapFallbackCss;
/**
* 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;
}
};
const FlexWrapFallback = /*@__PURE__*/ proxyCustomElement(class FlexWrapFallback extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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" }))));
}
get hostElement() { return this; }
static get style() { return UtrechtFlexWrapFallbackStyle0; }
}, [1, "utrecht-flex-wrap-fallback", {
"flexTarget": [513, "flextarget"],
"resizeObserver": [32],
"contentWraps": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["utrecht-flex-wrap-fallback"];
components.forEach(tagName => { switch (tagName) {
case "utrecht-flex-wrap-fallback":
if (!customElements.get(tagName)) {
customElements.define(tagName, FlexWrapFallback);
}
break;
} });
}
const UtrechtFlexWrapFallback = FlexWrapFallback;
const defineCustomElement = defineCustomElement$1;
export { UtrechtFlexWrapFallback, defineCustomElement };
//# sourceMappingURL=utrecht-flex-wrap-fallback.js.map