aptechka 0.88.13 → 0.88.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/notched/index.cjs +10 -2
- package/lib/notched/index.js +23 -7
- package/package.json +1 -1
package/lib/notched/index.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";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);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const cssUnitParser_index=require("../css-unit-parser/index.cjs"),elementResizer_index=require("../element-resizer/index.cjs"),
|
|
1
|
+
"use strict";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);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const cssUnitParser_index=require("../css-unit-parser/index.cjs"),elementResizer_index=require("../element-resizer/index.cjs"),string=require("../string-Bx5N38JG.cjs");require("construct-style-sheets-polyfill");require("../index-Cz5-98rw.cjs");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`
|
|
2
2
|
L${start} 0
|
|
3
3
|
C ${start+slope*.5},0 ${start+slope*.5},${depth} ${start+slope},${depth}
|
|
4
4
|
L${end-slope},${depth}
|
|
@@ -44,4 +44,12 @@
|
|
|
44
44
|
a ${cornerRadius} ${cornerRadius} 0 0 1 ${arcSectionLength} -${arcSectionLength}
|
|
45
45
|
c ${c} ${-d}
|
|
46
46
|
${b+c} ${-d}
|
|
47
|
-
${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 _clipId,_resizeListener,_NotchedElement_instances,parseCSSNotchValue_fn;const _NotchedElement=class _NotchedElement extends HTMLElement{constructor(){super();__privateAdd(this,_NotchedElement_instances);__privateAdd(this,_clipId);__privateAdd(this,_resizeListener,__name(()=>{const width=this.offsetWidth,height=this.offsetHeight,computed=getComputedStyle(this),cornerRadius=cssUnitParser_index.cssUnitParser.parse(computed.getPropertyValue("--notched-corner-radius")),topLeftCornerRadius=cssUnitParser_index.cssUnitParser.parse(computed.getPropertyValue("--notched-top-left-corner-radius")),topRightCornerRadius=cssUnitParser_index.cssUnitParser.parse(computed.getPropertyValue("--notched-top-right-corner-radius")),bottomRightCornerRadius=cssUnitParser_index.cssUnitParser.parse(computed.getPropertyValue("--notched-bottom-right-corner-radius")),bottomLeftCornerRadius=cssUnitParser_index.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")),path=getSvgPath({cornerRadius,topLeftCornerRadius,topRightCornerRadius,bottomRightCornerRadius,bottomLeftCornerRadius,cornerAngleAlpha,topLeftCornerAngleAlpha,topRightCornerAngleAlpha,bottomRightCornerAngleAlpha,bottomLeftCornerAngleAlpha,cornerSmoothing,preserveSmoothing,topNotches,rightNotches,bottomNotches,leftNotches,width,height});this
|
|
47
|
+
${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 _imageElement,_clipId,_resizeListener,_NotchedElement_instances,parseCSSNotchValue_fn;const _NotchedElement=class _NotchedElement extends HTMLElement{constructor(){super();__privateAdd(this,_NotchedElement_instances);__privateAdd(this,_imageElement,null);__privateAdd(this,_clipId,null);__privateAdd(this,_resizeListener,__name(()=>{const width=this.offsetWidth,height=this.offsetHeight,computed=getComputedStyle(this),cornerRadius=cssUnitParser_index.cssUnitParser.parse(computed.getPropertyValue("--notched-corner-radius")),topLeftCornerRadius=cssUnitParser_index.cssUnitParser.parse(computed.getPropertyValue("--notched-top-left-corner-radius")),topRightCornerRadius=cssUnitParser_index.cssUnitParser.parse(computed.getPropertyValue("--notched-top-right-corner-radius")),bottomRightCornerRadius=cssUnitParser_index.cssUnitParser.parse(computed.getPropertyValue("--notched-bottom-right-corner-radius")),bottomLeftCornerRadius=cssUnitParser_index.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")),path=getSvgPath({cornerRadius,topLeftCornerRadius,topRightCornerRadius,bottomRightCornerRadius,bottomLeftCornerRadius,cornerAngleAlpha,topLeftCornerAngleAlpha,topRightCornerAngleAlpha,bottomRightCornerAngleAlpha,bottomLeftCornerAngleAlpha,cornerSmoothing,preserveSmoothing,topNotches,rightNotches,bottomNotches,leftNotches,width,height});if(__privateGet(this,_clipId)){const svg=`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${this.offsetWidth}' height='${this.offsetHeight}' viewBox='0 0 ${this.offsetWidth} ${this.offsetHeight}'%3E%3Cdefs%3E%3CclipPath id='${__privateGet(this,_clipId)}'%3E%3Cpath fill='%23000' d='${path}'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23${__privateGet(this,_clipId)})' %3E%3Crect width='${this.offsetWidth}' height='${this.offsetHeight}' fill='%23000'/%3E%3C/g%3E%3C/svg%3E`;this.style.maskImage=`url("${svg}")`,this.style.maskPosition="center center",this.style.maskRepeat="no-repeat",this.style.maskSize="contain"}else if(__privateGet(this,_imageElement)){const svg=`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' viewBox='0 0 ${width} ${height}'%3E%3Cpath fill='%23000' d='${path}'/%3E%3C/svg%3E`;__privateGet(this,_imageElement).src=svg}},"#resizeListener"));const clip=this.hasAttribute("clip");__privateSet(this,_clipId,clip?"clip-"+string.generateId(10):null),__privateGet(this,_clipId)||(__privateSet(this,_imageElement,document.createElement("img")),__privateGet(this,_imageElement).style.cssText=`
|
|
48
|
+
position: absolute;
|
|
49
|
+
top: 0;
|
|
50
|
+
left: 0;
|
|
51
|
+
zIndex: -1;
|
|
52
|
+
display: block;
|
|
53
|
+
width: 100%;
|
|
54
|
+
height: 100%;
|
|
55
|
+
`,this.prepend(__privateGet(this,_imageElement)))}connectedCallback(){elementResizer_index.elementResizer.subscribe(this,__privateGet(this,_resizeListener))}disconnectedCallback(){elementResizer_index.elementResizer.unsubscribe(__privateGet(this,_resizeListener))}};_imageElement=new WeakMap,_clipId=new WeakMap,_resizeListener=new WeakMap,_NotchedElement_instances=new WeakSet,parseCSSNotchValue_fn=__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_index.cssUnitParser.parse(valuesStrings[0])||0,length:cssUnitParser_index.cssUnitParser.parse(valuesStrings[1])||0,slope:cssUnitParser_index.cssUnitParser.parse(valuesStrings[2])||0,depth:cssUnitParser_index.cssUnitParser.parse(valuesStrings[3])||0})}),notches},"#parseCSSNotchValue"),__name(_NotchedElement,"NotchedElement");let NotchedElement=_NotchedElement;customElements.get("e-notched")||customElements.define("e-notched",NotchedElement);exports.NotchedElement=NotchedElement;
|
package/lib/notched/index.js
CHANGED
|
@@ -7,9 +7,9 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
|
|
|
7
7
|
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);
|
|
8
8
|
import { cssUnitParser } from "../css-unit-parser/index.js";
|
|
9
9
|
import { elementResizer } from "../element-resizer/index.js";
|
|
10
|
-
import { t as ticker } from "../index-uJboZXlu.js";
|
|
11
10
|
import { g as generateId } from "../string-Ct-dy_cs.js";
|
|
12
11
|
import "construct-style-sheets-polyfill";
|
|
12
|
+
import "../index-uJboZXlu.js";
|
|
13
13
|
function distributeAndNormalize({
|
|
14
14
|
topLeftCornerRadius,
|
|
15
15
|
topRightCornerRadius,
|
|
@@ -372,12 +372,13 @@ function getSvgPath({
|
|
|
372
372
|
});
|
|
373
373
|
}
|
|
374
374
|
__name(getSvgPath, "getSvgPath");
|
|
375
|
-
var _clipId, _resizeListener, _NotchedElement_instances, parseCSSNotchValue_fn;
|
|
375
|
+
var _imageElement, _clipId, _resizeListener, _NotchedElement_instances, parseCSSNotchValue_fn;
|
|
376
376
|
const _NotchedElement = class _NotchedElement extends HTMLElement {
|
|
377
377
|
constructor() {
|
|
378
378
|
super();
|
|
379
379
|
__privateAdd(this, _NotchedElement_instances);
|
|
380
|
-
__privateAdd(this,
|
|
380
|
+
__privateAdd(this, _imageElement, null);
|
|
381
|
+
__privateAdd(this, _clipId, null);
|
|
381
382
|
__privateAdd(this, _resizeListener, /* @__PURE__ */ __name(() => {
|
|
382
383
|
const width = this.offsetWidth, height = this.offsetHeight, computed = getComputedStyle(this), cornerRadius = cssUnitParser.parse(
|
|
383
384
|
computed.getPropertyValue("--notched-corner-radius")
|
|
@@ -417,18 +418,33 @@ const _NotchedElement = class _NotchedElement extends HTMLElement {
|
|
|
417
418
|
width,
|
|
418
419
|
height
|
|
419
420
|
});
|
|
420
|
-
|
|
421
|
+
if (__privateGet(this, _clipId)) {
|
|
422
|
+
const svg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${this.offsetWidth}' height='${this.offsetHeight}' viewBox='0 0 ${this.offsetWidth} ${this.offsetHeight}'%3E%3Cdefs%3E%3CclipPath id='${__privateGet(this, _clipId)}'%3E%3Cpath fill='%23000' d='${path}'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23${__privateGet(this, _clipId)})' %3E%3Crect width='${this.offsetWidth}' height='${this.offsetHeight}' fill='%23000'/%3E%3C/g%3E%3C/svg%3E`;
|
|
423
|
+
this.style.maskImage = `url("${svg}")`, this.style.maskPosition = "center center", this.style.maskRepeat = "no-repeat", this.style.maskSize = "contain";
|
|
424
|
+
} else if (__privateGet(this, _imageElement)) {
|
|
425
|
+
const svg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' viewBox='0 0 ${width} ${height}'%3E%3Cpath fill='%23000' d='${path}'/%3E%3C/svg%3E`;
|
|
426
|
+
__privateGet(this, _imageElement).src = svg;
|
|
427
|
+
}
|
|
421
428
|
}, "#resizeListener"));
|
|
422
|
-
|
|
429
|
+
const clip = this.hasAttribute("clip");
|
|
430
|
+
__privateSet(this, _clipId, clip ? "clip-" + generateId(10) : null), __privateGet(this, _clipId) || (__privateSet(this, _imageElement, document.createElement("img")), __privateGet(this, _imageElement).style.cssText = `
|
|
431
|
+
position: absolute;
|
|
432
|
+
top: 0;
|
|
433
|
+
left: 0;
|
|
434
|
+
zIndex: -1;
|
|
435
|
+
display: block;
|
|
436
|
+
width: 100%;
|
|
437
|
+
height: 100%;
|
|
438
|
+
`, this.prepend(__privateGet(this, _imageElement)));
|
|
423
439
|
}
|
|
424
440
|
connectedCallback() {
|
|
425
|
-
elementResizer.subscribe(this, __privateGet(this, _resizeListener))
|
|
441
|
+
elementResizer.subscribe(this, __privateGet(this, _resizeListener));
|
|
426
442
|
}
|
|
427
443
|
disconnectedCallback() {
|
|
428
444
|
elementResizer.unsubscribe(__privateGet(this, _resizeListener));
|
|
429
445
|
}
|
|
430
446
|
};
|
|
431
|
-
_clipId = new WeakMap(), _resizeListener = new WeakMap(), _NotchedElement_instances = new WeakSet(), parseCSSNotchValue_fn = /* @__PURE__ */ __name(function(value) {
|
|
447
|
+
_imageElement = new WeakMap(), _clipId = new WeakMap(), _resizeListener = new WeakMap(), _NotchedElement_instances = new WeakSet(), parseCSSNotchValue_fn = /* @__PURE__ */ __name(function(value) {
|
|
432
448
|
const notchesString = value.split(",").map((v) => v.trim()).filter((v) => !!v), notches = [];
|
|
433
449
|
return notchesString.forEach((notchString) => {
|
|
434
450
|
const valuesStrings = notchString.split(" ").map((v) => v.trim()).filter((v) => !!v);
|