aptechka 0.86.0 → 0.87.1

package/lib/notched.js

@@ -0,0 +1,470 @@
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj)), __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value), __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value), __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+import { cssUnitParser } from "./css-unit-parser/index.js";
+import { elementResizer } from "./element-resizer/index.js";
+import { t as ticker } from "./index-ClTMVKJp.js";
+import { g as generateId } from "./string-B3lm2b7v.js";
+import "construct-style-sheets-polyfill";
+function distributeAndNormalize({
+  topLeftCornerRadius,
+  topRightCornerRadius,
+  bottomRightCornerRadius,
+  bottomLeftCornerRadius,
+  width,
+  height
+}) {
+  const roundingAndSmoothingBudgetMap = {
+    topLeft: -1,
+    topRight: -1,
+    bottomLeft: -1,
+    bottomRight: -1
+  }, cornerRadiusMap = {
+    topLeft: topLeftCornerRadius,
+    topRight: topRightCornerRadius,
+    bottomLeft: bottomLeftCornerRadius,
+    bottomRight: bottomRightCornerRadius
+  };
+  return Object.entries(cornerRadiusMap).sort(([, radius1], [, radius2]) => radius2 - radius1).forEach(([cornerName, radius]) => {
+    const corner = cornerName, adjacents = adjacentsByCorner[corner], budget = Math.min(
+      ...adjacents.map((adjacent) => {
+        const adjacentCornerRadius = cornerRadiusMap[adjacent.corner];
+        if (radius === 0 && adjacentCornerRadius === 0)
+          return 0;
+        const adjacentCornerBudget = roundingAndSmoothingBudgetMap[adjacent.corner], sideLength = adjacent.side === "top" || adjacent.side === "bottom" ? width : height;
+        return adjacentCornerBudget >= 0 ? sideLength - roundingAndSmoothingBudgetMap[adjacent.corner] : radius / (radius + adjacentCornerRadius) * sideLength;
+      })
+    );
+    roundingAndSmoothingBudgetMap[corner] = budget, cornerRadiusMap[corner] = Math.min(radius, budget);
+  }), {
+    topLeft: {
+      radius: cornerRadiusMap.topLeft,
+      roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.topLeft
+    },
+    topRight: {
+      radius: cornerRadiusMap.topRight,
+      roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.topRight
+    },
+    bottomLeft: {
+      radius: cornerRadiusMap.bottomLeft,
+      roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.bottomLeft
+    },
+    bottomRight: {
+      radius: cornerRadiusMap.bottomRight,
+      roundingAndSmoothingBudget: roundingAndSmoothingBudgetMap.bottomRight
+    }
+  };
+}
+__name(distributeAndNormalize, "distributeAndNormalize");
+const adjacentsByCorner = {
+  topLeft: [
+    {
+      corner: "topRight",
+      side: "top"
+    },
+    {
+      corner: "bottomLeft",
+      side: "left"
+    }
+  ],
+  topRight: [
+    {
+      corner: "topLeft",
+      side: "top"
+    },
+    {
+      corner: "bottomRight",
+      side: "right"
+    }
+  ],
+  bottomLeft: [
+    {
+      corner: "bottomRight",
+      side: "bottom"
+    },
+    {
+      corner: "topLeft",
+      side: "left"
+    }
+  ],
+  bottomRight: [
+    {
+      corner: "bottomLeft",
+      side: "bottom"
+    },
+    {
+      corner: "topRight",
+      side: "right"
+    }
+  ]
+};
+function getPathParamsForCorner({
+  cornerRadius,
+  cornerSmoothing,
+  preserveSmoothing,
+  roundingAndSmoothingBudget,
+  cornerAngleAlpha = 90
+}) {
+  let p = (1 + cornerSmoothing) * cornerRadius;
+  if (!preserveSmoothing) {
+    const maxCornerSmoothing = roundingAndSmoothingBudget / cornerRadius - 1;
+    cornerSmoothing = Math.min(cornerSmoothing, maxCornerSmoothing), p = Math.min(p, roundingAndSmoothingBudget);
+  }
+  const arcMeasure = 90 * (1 - cornerSmoothing), arcSectionLength = Math.sin(toRadians(arcMeasure / 2)) * cornerRadius * Math.sqrt(2), angleAlpha = (cornerAngleAlpha - arcMeasure) / 2, p3ToP4Distance = cornerRadius * Math.tan(toRadians(angleAlpha / 2)), angleBeta = 45 * cornerSmoothing, c = p3ToP4Distance * Math.cos(toRadians(angleBeta)), d = c * Math.tan(toRadians(angleBeta));
+  let b = (p - arcSectionLength - c - d) / 3, a = 2 * b;
+  if (preserveSmoothing && p > roundingAndSmoothingBudget) {
+    const p1ToP3MaxDistance = roundingAndSmoothingBudget - d - arcSectionLength - c, minA = p1ToP3MaxDistance / 6, maxB = p1ToP3MaxDistance - minA;
+    b = Math.min(b, maxB), a = p1ToP3MaxDistance - b, p = Math.min(p, roundingAndSmoothingBudget);
+  }
+  return {
+    a,
+    b,
+    c,
+    d,
+    p,
+    arcSectionLength,
+    cornerRadius
+  };
+}
+__name(getPathParamsForCorner, "getPathParamsForCorner");
+function getSVGPathFromPathParams({
+  width,
+  height,
+  topLeftPathParams,
+  topRightPathParams,
+  bottomLeftPathParams,
+  bottomRightPathParams,
+  topNotches = [],
+  rightNotches = [],
+  bottomNotches = [],
+  leftNotches = []
+}) {
+  let d = `M ${topLeftPathParams.p} 0`;
+  return topNotches.forEach((n) => {
+    d += drawTopNotch(n);
+  }), d += `L ${width - topRightPathParams.p} 0`, d += drawTopRightPath(topRightPathParams), rightNotches.forEach((n) => {
+    d += drawRightNotch(n, width);
+  }), d += `L ${width} ${height - bottomRightPathParams.p}`, d += drawBottomRightPath(bottomRightPathParams), bottomNotches.forEach((n) => {
+    d += drawBottomNotch(n, height);
+  }), d += `L ${bottomLeftPathParams.p} ${height}`, d += drawBottomLeftPath(bottomLeftPathParams), leftNotches.forEach((n) => {
+    d += drawLeftNotch(n);
+  }), d += `L 0 ${topLeftPathParams.p}`, d += drawTopLeftPath(topLeftPathParams), d += "Z", d.replace(/[\t\s\n]+/g, " ").trim();
+}
+__name(getSVGPathFromPathParams, "getSVGPathFromPathParams");
+function drawTopNotch({ start, length, slope, depth }) {
+  const end = start + length;
+  return `
+    L${start} 0
+    C ${start + slope * 0.5},0 ${start + slope * 0.5},${depth} ${start + slope},${depth}
+    L${end - slope},${depth}
+    C ${end - slope * 0.5},${depth} ${end - slope * 0.5},0 ${end},0
+  `;
+}
+__name(drawTopNotch, "drawTopNotch");
+function drawBottomNotch({ start, length, slope, depth }, height) {
+  const end = start + length;
+  return `
+    L${end},${height}
+    C ${end - slope * 0.5},${height} ${end - slope * 0.5},${height - depth} ${end - slope},${height - depth}
+    L${start + slope},${height - depth}
+    C ${start + slope * 0.5},${height - depth} ${start + slope * 0.5},${height} ${start},${height}
+  `;
+}
+__name(drawBottomNotch, "drawBottomNotch");
+function drawLeftNotch({ start, length, slope, depth }) {
+  const end = start + length;
+  return `
+    L0,${end}
+    C 0,${end - slope * 0.5} ${depth},${end - slope * 0.5} ${depth},${end - slope}
+    L${depth},${start + slope}
+    C ${depth},${start + slope * 0.5} 0,${start + slope * 0.5} 0,${start}
+  `;
+}
+__name(drawLeftNotch, "drawLeftNotch");
+function drawRightNotch({ start, length, slope, depth }, width) {
+  const end = start + length;
+  return `
+    L${width},${start}
+    C ${width},${start + slope * 0.5} ${width - depth},${start + slope * 0.5} ${width - depth},${start + slope}
+    L${width - depth},${end - slope}
+    C ${width - depth},${end - slope * 0.5} ${width},${end - slope * 0.5} ${width},${end}
+  `;
+}
+__name(drawRightNotch, "drawRightNotch");
+function drawTopRightPath({
+  cornerRadius,
+  a,
+  b,
+  c,
+  d,
+  p,
+  arcSectionLength
+}) {
+  return cornerRadius ? rounded`
+    c ${a} 0 ${a + b} 0 ${a + b + c} ${d}
+    a ${cornerRadius} ${cornerRadius} 0 0 1 ${arcSectionLength} ${arcSectionLength}
+    c ${d} ${c}
+        ${d} ${b + c}
+        ${d} ${a + b + c}` : rounded`l ${p} 0`;
+}
+__name(drawTopRightPath, "drawTopRightPath");
+function drawBottomRightPath({
+  cornerRadius,
+  a,
+  b,
+  c,
+  d,
+  p,
+  arcSectionLength
+}) {
+  return cornerRadius ? rounded`
+    c 0 ${a}
+      0 ${a + b}
+      ${-d} ${a + b + c}
+    a ${cornerRadius} ${cornerRadius} 0 0 1 -${arcSectionLength} ${arcSectionLength}
+    c ${-c} ${d}
+      ${-(b + c)} ${d}
+      ${-(a + b + c)} ${d}` : rounded`l 0 ${p}`;
+}
+__name(drawBottomRightPath, "drawBottomRightPath");
+function drawBottomLeftPath({
+  cornerRadius,
+  a,
+  b,
+  c,
+  d,
+  p,
+  arcSectionLength
+}) {
+  return cornerRadius ? rounded`
+    c ${-a} 0
+      ${-(a + b)} 0
+      ${-(a + b + c)} ${-d}
+    a ${cornerRadius} ${cornerRadius} 0 0 1 -${arcSectionLength} -${arcSectionLength}
+    c ${-d} ${-c}
+      ${-d} ${-(b + c)}
+      ${-d} ${-(a + b + c)}` : rounded`l ${-p} 0`;
+}
+__name(drawBottomLeftPath, "drawBottomLeftPath");
+function drawTopLeftPath({
+  cornerRadius,
+  a,
+  b,
+  c,
+  d,
+  p,
+  arcSectionLength
+}) {
+  return cornerRadius ? rounded`
+    c 0 ${-a}
+      0 ${-(a + b)}
+      ${d} ${-(a + b + c)}
+    a ${cornerRadius} ${cornerRadius} 0 0 1 ${arcSectionLength} -${arcSectionLength}
+    c ${c} ${-d}
+      ${b + c} ${-d}
+      ${a + b + c} ${-d}` : rounded`l 0 ${-p}`;
+}
+__name(drawTopLeftPath, "drawTopLeftPath");
+function toRadians(degrees) {
+  return degrees * Math.PI / 180;
+}
+__name(toRadians, "toRadians");
+function rounded(strings, ...values) {
+  return strings.reduce((acc, str, i) => {
+    const value = values[i];
+    return typeof value == "number" ? acc + str + value.toFixed(4) : acc + str + (value != null ? value : "");
+  }, "");
+}
+__name(rounded, "rounded");
+function getSvgPath({
+  cornerRadius = 0,
+  topLeftCornerRadius,
+  topRightCornerRadius,
+  bottomRightCornerRadius,
+  bottomLeftCornerRadius,
+  cornerAngleAlpha = 90,
+  topLeftCornerAngleAlpha,
+  topRightCornerAngleAlpha,
+  bottomRightCornerAngleAlpha,
+  bottomLeftCornerAngleAlpha,
+  cornerSmoothing,
+  preserveSmoothing = !1,
+  topNotches,
+  rightNotches,
+  bottomNotches,
+  leftNotches,
+  width,
+  height
+}) {
+  if (topLeftCornerRadius = topLeftCornerRadius != null ? topLeftCornerRadius : cornerRadius, topRightCornerRadius = topRightCornerRadius != null ? topRightCornerRadius : cornerRadius, bottomLeftCornerRadius = bottomLeftCornerRadius != null ? bottomLeftCornerRadius : cornerRadius, bottomRightCornerRadius = bottomRightCornerRadius != null ? bottomRightCornerRadius : cornerRadius, topLeftCornerAngleAlpha = topLeftCornerAngleAlpha != null ? topLeftCornerAngleAlpha : cornerAngleAlpha, topRightCornerAngleAlpha = topRightCornerAngleAlpha != null ? topRightCornerAngleAlpha : cornerAngleAlpha, bottomLeftCornerAngleAlpha = bottomLeftCornerAngleAlpha != null ? bottomLeftCornerAngleAlpha : cornerAngleAlpha, bottomRightCornerAngleAlpha = bottomRightCornerAngleAlpha != null ? bottomRightCornerAngleAlpha : cornerAngleAlpha, topLeftCornerRadius === topRightCornerRadius && topRightCornerRadius === bottomRightCornerRadius && bottomRightCornerRadius === bottomLeftCornerRadius && bottomLeftCornerRadius === topLeftCornerRadius && topLeftCornerAngleAlpha === topRightCornerAngleAlpha && topRightCornerAngleAlpha === bottomRightCornerAngleAlpha && bottomRightCornerAngleAlpha === bottomLeftCornerAngleAlpha && bottomLeftCornerAngleAlpha === topLeftCornerAngleAlpha) {
+    const roundingAndSmoothingBudget = Math.min(width, height) / 2, cornerRadius2 = Math.min(
+      topLeftCornerRadius,
+      roundingAndSmoothingBudget
+    ), pathParams = getPathParamsForCorner({
+      cornerRadius: cornerRadius2,
+      cornerSmoothing,
+      cornerAngleAlpha,
+      preserveSmoothing,
+      roundingAndSmoothingBudget
+    });
+    return getSVGPathFromPathParams({
+      width,
+      height,
+      topLeftPathParams: pathParams,
+      topRightPathParams: pathParams,
+      bottomLeftPathParams: pathParams,
+      bottomRightPathParams: pathParams,
+      topNotches,
+      rightNotches,
+      bottomNotches,
+      leftNotches
+    });
+  }
+  const { topLeft, topRight, bottomLeft, bottomRight } = distributeAndNormalize(
+    {
+      topLeftCornerRadius,
+      topRightCornerRadius,
+      bottomRightCornerRadius,
+      bottomLeftCornerRadius,
+      width,
+      height
+    }
+  );
+  return getSVGPathFromPathParams({
+    width,
+    height,
+    topLeftPathParams: getPathParamsForCorner({
+      cornerSmoothing,
+      preserveSmoothing,
+      cornerRadius: topLeft.radius,
+      roundingAndSmoothingBudget: topLeft.roundingAndSmoothingBudget,
+      cornerAngleAlpha: topLeftCornerAngleAlpha
+    }),
+    topRightPathParams: getPathParamsForCorner({
+      cornerSmoothing,
+      preserveSmoothing,
+      cornerRadius: topRight.radius,
+      roundingAndSmoothingBudget: topRight.roundingAndSmoothingBudget,
+      cornerAngleAlpha: topRightCornerAngleAlpha
+    }),
+    bottomRightPathParams: getPathParamsForCorner({
+      cornerSmoothing,
+      preserveSmoothing,
+      cornerRadius: bottomRight.radius,
+      roundingAndSmoothingBudget: bottomRight.roundingAndSmoothingBudget,
+      cornerAngleAlpha: bottomRightCornerAngleAlpha
+    }),
+    bottomLeftPathParams: getPathParamsForCorner({
+      cornerSmoothing,
+      preserveSmoothing,
+      cornerRadius: bottomLeft.radius,
+      roundingAndSmoothingBudget: bottomLeft.roundingAndSmoothingBudget,
+      cornerAngleAlpha: bottomLeftCornerAngleAlpha
+    }),
+    topNotches,
+    rightNotches,
+    bottomNotches,
+    leftNotches
+  });
+}
+__name(getSvgPath, "getSvgPath");
+var _svgElement, _pathElement, _resizeListener, _NotchedElement_instances, parseCSSNotchValue_fn;
+const _NotchedElement = class _NotchedElement extends HTMLElement {
+  constructor() {
+    super();
+    __privateAdd(this, _NotchedElement_instances);
+    __privateAdd(this, _svgElement);
+    __privateAdd(this, _pathElement);
+    __privateAdd(this, _resizeListener, /* @__PURE__ */ __name(() => {
+      const width = this.offsetWidth, height = this.offsetHeight, computed = getComputedStyle(this);
+      __privateGet(this, _svgElement).setAttributeNS(
+        "http://www.w3.org/2000/svg",
+        "viewBox",
+        `0 0 ${width} ${height}`
+      );
+      const cornerRadius = cssUnitParser.parse(
+        computed.getPropertyValue("--notched-corner-radius")
+      ), topLeftCornerRadius = cssUnitParser.parse(
+        computed.getPropertyValue("--notched-top-left-corner-radius")
+      ), topRightCornerRadius = cssUnitParser.parse(
+        computed.getPropertyValue("--notched-top-right-corner-radius")
+      ), bottomRightCornerRadius = cssUnitParser.parse(
+        computed.getPropertyValue("--notched-bottom-right-corner-radius")
+      ), bottomLeftCornerRadius = cssUnitParser.parse(
+        computed.getPropertyValue("--notched-bottom-left-corner-radius")
+      ), cornerAngleAlpha = parseFloat(computed.getPropertyValue("--notched-corner-angle-alpha")) || void 0, topLeftCornerAngleAlpha = parseFloat(
+        computed.getPropertyValue("--notched-top-left-corner-angle-alpha")
+      ) || void 0, topRightCornerAngleAlpha = parseFloat(
+        computed.getPropertyValue("--notched-top-right-corner-angle-alpha")
+      ) || void 0, bottomRightCornerAngleAlpha = parseFloat(
+        computed.getPropertyValue("--notched-bottom-right-corner-angle-alpha")
+      ) || void 0, bottomLeftCornerAngleAlpha = parseFloat(
+        computed.getPropertyValue("--notched-bottom-left-corner-angle-alpha")
+      ) || void 0, cornerSmoothing = parseFloat(computed.getPropertyValue("--notched-corner-smoothing")) || 0, preserveSmoothing = computed.getPropertyValue("--notched-preserve-smoothing") !== "false", topNotches = __privateMethod(this, _NotchedElement_instances, parseCSSNotchValue_fn).call(this, computed.getPropertyValue("--notched-top-notches")), rightNotches = __privateMethod(this, _NotchedElement_instances, parseCSSNotchValue_fn).call(this, computed.getPropertyValue("--notched-right-notches")), bottomNotches = __privateMethod(this, _NotchedElement_instances, parseCSSNotchValue_fn).call(this, computed.getPropertyValue("--notched-bottom-notches")), leftNotches = __privateMethod(this, _NotchedElement_instances, parseCSSNotchValue_fn).call(this, computed.getPropertyValue("--notched-left-notches")), color = computed.getPropertyValue("--notched-color"), path = getSvgPath({
+        cornerRadius,
+        topLeftCornerRadius,
+        topRightCornerRadius,
+        bottomRightCornerRadius,
+        bottomLeftCornerRadius,
+        cornerAngleAlpha,
+        topLeftCornerAngleAlpha,
+        topRightCornerAngleAlpha,
+        bottomRightCornerAngleAlpha,
+        bottomLeftCornerAngleAlpha,
+        cornerSmoothing,
+        preserveSmoothing,
+        topNotches,
+        rightNotches,
+        bottomNotches,
+        leftNotches,
+        width,
+        height
+      });
+      __privateGet(this, _pathElement).setAttribute("d", path), color && __privateGet(this, _pathElement).setAttribute("fill", color);
+    }, "#resizeListener"));
+    const clipId = this.hasAttribute("clip") ? "clip-" + generateId(10) : null, tmpElement = document.createElement("div");
+    tmpElement.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg">
+        ${clipId ? `<clipPath id="${clipId}">` : ""}
+          <path></path>
+        ${clipId ? "</clipPath>" : ""}
+      </svg>
+      <slot></slot>
+    `, clipId && (this.style.clipPath = `url(#${clipId})`), this.style.position = "relative", __privateSet(this, _svgElement, tmpElement.querySelector("svg")), __privateGet(this, _svgElement).style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      zIndex: -1;
+      display: block;
+      width: 100%;
+      height: 100%;
+    `, __privateSet(this, _pathElement, tmpElement.querySelector("path")), this.prepend(tmpElement.firstElementChild);
+  }
+  connectedCallback() {
+    elementResizer.subscribe(this, __privateGet(this, _resizeListener)), ticker.subscribe(__privateGet(this, _resizeListener));
+  }
+  disconnectedCallback() {
+    elementResizer.unsubscribe(__privateGet(this, _resizeListener));
+  }
+};
+_svgElement = new WeakMap(), _pathElement = new WeakMap(), _resizeListener = new WeakMap(), _NotchedElement_instances = new WeakSet(), parseCSSNotchValue_fn = /* @__PURE__ */ __name(function(value) {
+  const notchesString = value.split(",").map((v) => v.trim()).filter((v) => !!v), notches = [];
+  return notchesString.forEach((notchString) => {
+    const valuesStrings = notchString.split(" ").map((v) => v.trim()).filter((v) => !!v);
+    notches.push({
+      start: cssUnitParser.parse(valuesStrings[0]) || 0,
+      length: cssUnitParser.parse(valuesStrings[1]) || 0,
+      slope: cssUnitParser.parse(valuesStrings[2]) || 0,
+      depth: cssUnitParser.parse(valuesStrings[3]) || 0
+    });
+  }), notches;
+}, "#parseCSSNotchValue"), __name(_NotchedElement, "NotchedElement");
+let NotchedElement = _NotchedElement;
+customElements.get("e-notched") || customElements.define("e-notched", NotchedElement);
+export {
+  NotchedElement
+};