aptechka 0.96.0 → 0.96.1
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/NotchedElement.d.ts +0 -20
- package/lib/notched/index.cjs +11 -3
- package/lib/notched/index.js +41 -5
- package/package.json +1 -1
|
@@ -1,24 +1,4 @@
|
|
|
1
1
|
import { GetSvgPathParams } from './getSvgPath';
|
|
2
|
-
export interface NotchedElementUpdateParameters {
|
|
3
|
-
cornerRadius: number;
|
|
4
|
-
topLeftCornerRadius: number;
|
|
5
|
-
topRightCornerRadius: number;
|
|
6
|
-
bottomRightCornerRadius: number;
|
|
7
|
-
bottomLeftCornerRadius: number;
|
|
8
|
-
cornerAngleAlpha: number;
|
|
9
|
-
topLeftCornerAngleAlpha: number;
|
|
10
|
-
topRightCornerAngleAlpha: number;
|
|
11
|
-
bottomRightCornerAngleAlpha: number;
|
|
12
|
-
bottomLeftCornerAngleAlpha: number;
|
|
13
|
-
cornerSmoothing: number;
|
|
14
|
-
preserveSmoothing: number;
|
|
15
|
-
topNotches: number;
|
|
16
|
-
rightNotches: number;
|
|
17
|
-
bottomNotches: number;
|
|
18
|
-
leftNotches: number;
|
|
19
|
-
width: number;
|
|
20
|
-
height: number;
|
|
21
|
-
}
|
|
22
2
|
export declare class NotchedElement extends HTMLElement {
|
|
23
3
|
#private;
|
|
24
4
|
constructor();
|
package/lib/notched/index.cjs
CHANGED
|
@@ -44,12 +44,20 @@
|
|
|
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 _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(()=>{if(this.hasAttribute("manual-update"))return;const 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"));this.update({cornerRadius,topLeftCornerRadius,topRightCornerRadius,bottomRightCornerRadius,bottomLeftCornerRadius,cornerAngleAlpha,topLeftCornerAngleAlpha,topRightCornerAngleAlpha,bottomRightCornerAngleAlpha,bottomLeftCornerAngleAlpha,cornerSmoothing,preserveSmoothing,topNotches,rightNotches,bottomNotches,leftNotches})},"#resizeListener"));const clip=this.hasAttribute("clip");__privateSet(this,_clipId,clip?"clip-"+string.generateId(10):null),
|
|
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,_svgElement,_clipId,_clipPathId,_resizeListener,_NotchedElement_instances,parseCSSNotchValue_fn;const _NotchedElement=class _NotchedElement extends HTMLElement{constructor(){super();__privateAdd(this,_NotchedElement_instances);__privateAdd(this,_imageElement,null);__privateAdd(this,_svgElement,null);__privateAdd(this,_clipId,null);__privateAdd(this,_clipPathId,null);__privateAdd(this,_resizeListener,__name(()=>{if(this.hasAttribute("manual-update"))return;const 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"));this.update({cornerRadius,topLeftCornerRadius,topRightCornerRadius,bottomRightCornerRadius,bottomLeftCornerRadius,cornerAngleAlpha,topLeftCornerAngleAlpha,topRightCornerAngleAlpha,bottomRightCornerAngleAlpha,bottomLeftCornerAngleAlpha,cornerSmoothing,preserveSmoothing,topNotches,rightNotches,bottomNotches,leftNotches})},"#resizeListener"));const clip=this.hasAttribute("clip"),svgInside=this.hasAttribute("svg-inside");if(__privateSet(this,_clipId,clip?"clip-"+string.generateId(10):null),svgInside){__privateSet(this,_clipPathId,"clip-path-"+string.generateId(10)),__privateSet(this,_svgElement,document.createElementNS("http://www.w3.org/2000/svg","svg")),__privateGet(this,_svgElement).setAttribute("width","0"),__privateGet(this,_svgElement).setAttribute("height","0"),__privateGet(this,_svgElement).style.cssText=`
|
|
48
48
|
position: absolute;
|
|
49
49
|
top: 0;
|
|
50
50
|
left: 0;
|
|
51
|
-
|
|
51
|
+
width: 0;
|
|
52
|
+
height: 0;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
pointer-events: none;
|
|
55
|
+
`;const defs=document.createElementNS("http://www.w3.org/2000/svg","defs"),clipPath=document.createElementNS("http://www.w3.org/2000/svg","clipPath");clipPath.setAttribute("id",__privateGet(this,_clipPathId));const path=document.createElementNS("http://www.w3.org/2000/svg","path");path.setAttribute("d",""),clipPath.appendChild(path),defs.appendChild(clipPath),__privateGet(this,_svgElement).appendChild(defs),this.prepend(__privateGet(this,_svgElement)),this.style.clipPath=`url(#${__privateGet(this,_clipPathId)})`}else __privateGet(this,_clipId)||(__privateSet(this,_imageElement,document.createElement("img")),__privateGet(this,_imageElement).style.cssText=`
|
|
56
|
+
position: absolute;
|
|
57
|
+
top: 0;
|
|
58
|
+
left: 0;
|
|
59
|
+
z-index: -1;
|
|
52
60
|
display: block;
|
|
53
61
|
width: 100%;
|
|
54
62
|
height: 100%;
|
|
55
|
-
`,this.prepend(__privateGet(this,_imageElement)))}update(params){const width=this.offsetWidth,height=this.offsetHeight,path=getSvgPath(__spreadProps(__spreadValues({},params),{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}}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:cssValueParser_index.cssValueParser.parse(valuesStrings[0],this)||0,length:cssValueParser_index.cssValueParser.parse(valuesStrings[1],this)||0,slope:cssValueParser_index.cssValueParser.parse(valuesStrings[2],this)||0,depth:cssValueParser_index.cssValueParser.parse(valuesStrings[3],this)||0})}),notches},"#parseCSSNotchValue"),__name(_NotchedElement,"NotchedElement");let NotchedElement=_NotchedElement;customElements.get("e-notched")||customElements.define("e-notched",NotchedElement);exports.NotchedElement=NotchedElement;
|
|
63
|
+
`,this.prepend(__privateGet(this,_imageElement)))}update(params){const width=this.offsetWidth,height=this.offsetHeight,path=getSvgPath(__spreadProps(__spreadValues({},params),{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,_svgElement)&&__privateGet(this,_clipPathId)){const clipPath=__privateGet(this,_svgElement).querySelector(`[id="${__privateGet(this,_clipPathId)}"]`);if(clipPath){const pathElement=clipPath.querySelector("path");pathElement&&pathElement.setAttribute("d",path)}}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}}connectedCallback(){elementResizer_index.elementResizer.subscribe(this,__privateGet(this,_resizeListener))}disconnectedCallback(){elementResizer_index.elementResizer.unsubscribe(__privateGet(this,_resizeListener))}};_imageElement=new WeakMap,_svgElement=new WeakMap,_clipId=new WeakMap,_clipPathId=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:cssValueParser_index.cssValueParser.parse(valuesStrings[0],this)||0,length:cssValueParser_index.cssValueParser.parse(valuesStrings[1],this)||0,slope:cssValueParser_index.cssValueParser.parse(valuesStrings[2],this)||0,depth:cssValueParser_index.cssValueParser.parse(valuesStrings[3],this)||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
|
@@ -383,13 +383,15 @@ function getSvgPath({
|
|
|
383
383
|
});
|
|
384
384
|
}
|
|
385
385
|
__name(getSvgPath, "getSvgPath");
|
|
386
|
-
var _imageElement, _clipId, _resizeListener, _NotchedElement_instances, parseCSSNotchValue_fn;
|
|
386
|
+
var _imageElement, _svgElement, _clipId, _clipPathId, _resizeListener, _NotchedElement_instances, parseCSSNotchValue_fn;
|
|
387
387
|
const _NotchedElement = class _NotchedElement extends HTMLElement {
|
|
388
388
|
constructor() {
|
|
389
389
|
super();
|
|
390
390
|
__privateAdd(this, _NotchedElement_instances);
|
|
391
391
|
__privateAdd(this, _imageElement, null);
|
|
392
|
+
__privateAdd(this, _svgElement, null);
|
|
392
393
|
__privateAdd(this, _clipId, null);
|
|
394
|
+
__privateAdd(this, _clipPathId, null);
|
|
393
395
|
__privateAdd(this, _resizeListener, /* @__PURE__ */ __name(() => {
|
|
394
396
|
if (this.hasAttribute("manual-update"))
|
|
395
397
|
return;
|
|
@@ -431,12 +433,38 @@ const _NotchedElement = class _NotchedElement extends HTMLElement {
|
|
|
431
433
|
leftNotches
|
|
432
434
|
});
|
|
433
435
|
}, "#resizeListener"));
|
|
434
|
-
const clip = this.hasAttribute("clip");
|
|
435
|
-
__privateSet(this, _clipId, clip ? "clip-" + generateId(10) : null),
|
|
436
|
+
const clip = this.hasAttribute("clip"), svgInside = this.hasAttribute("svg-inside");
|
|
437
|
+
if (__privateSet(this, _clipId, clip ? "clip-" + generateId(10) : null), svgInside) {
|
|
438
|
+
__privateSet(this, _clipPathId, "clip-path-" + generateId(10)), __privateSet(this, _svgElement, document.createElementNS(
|
|
439
|
+
"http://www.w3.org/2000/svg",
|
|
440
|
+
"svg"
|
|
441
|
+
)), __privateGet(this, _svgElement).setAttribute("width", "0"), __privateGet(this, _svgElement).setAttribute("height", "0"), __privateGet(this, _svgElement).style.cssText = `
|
|
436
442
|
position: absolute;
|
|
437
443
|
top: 0;
|
|
438
444
|
left: 0;
|
|
439
|
-
|
|
445
|
+
width: 0;
|
|
446
|
+
height: 0;
|
|
447
|
+
overflow: hidden;
|
|
448
|
+
pointer-events: none;
|
|
449
|
+
`;
|
|
450
|
+
const defs = document.createElementNS(
|
|
451
|
+
"http://www.w3.org/2000/svg",
|
|
452
|
+
"defs"
|
|
453
|
+
), clipPath = document.createElementNS(
|
|
454
|
+
"http://www.w3.org/2000/svg",
|
|
455
|
+
"clipPath"
|
|
456
|
+
);
|
|
457
|
+
clipPath.setAttribute("id", __privateGet(this, _clipPathId));
|
|
458
|
+
const path = document.createElementNS(
|
|
459
|
+
"http://www.w3.org/2000/svg",
|
|
460
|
+
"path"
|
|
461
|
+
);
|
|
462
|
+
path.setAttribute("d", ""), clipPath.appendChild(path), defs.appendChild(clipPath), __privateGet(this, _svgElement).appendChild(defs), this.prepend(__privateGet(this, _svgElement)), this.style.clipPath = `url(#${__privateGet(this, _clipPathId)})`;
|
|
463
|
+
} else __privateGet(this, _clipId) || (__privateSet(this, _imageElement, document.createElement("img")), __privateGet(this, _imageElement).style.cssText = `
|
|
464
|
+
position: absolute;
|
|
465
|
+
top: 0;
|
|
466
|
+
left: 0;
|
|
467
|
+
z-index: -1;
|
|
440
468
|
display: block;
|
|
441
469
|
width: 100%;
|
|
442
470
|
height: 100%;
|
|
@@ -450,6 +478,14 @@ const _NotchedElement = class _NotchedElement extends HTMLElement {
|
|
|
450
478
|
if (__privateGet(this, _clipId)) {
|
|
451
479
|
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`;
|
|
452
480
|
this.style.maskImage = `url("${svg}")`, this.style.maskPosition = "center center", this.style.maskRepeat = "no-repeat", this.style.maskSize = "contain";
|
|
481
|
+
} else if (__privateGet(this, _svgElement) && __privateGet(this, _clipPathId)) {
|
|
482
|
+
const clipPath = __privateGet(this, _svgElement).querySelector(
|
|
483
|
+
`[id="${__privateGet(this, _clipPathId)}"]`
|
|
484
|
+
);
|
|
485
|
+
if (clipPath) {
|
|
486
|
+
const pathElement = clipPath.querySelector("path");
|
|
487
|
+
pathElement && pathElement.setAttribute("d", path);
|
|
488
|
+
}
|
|
453
489
|
} else if (__privateGet(this, _imageElement)) {
|
|
454
490
|
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`;
|
|
455
491
|
__privateGet(this, _imageElement).src = svg;
|
|
@@ -462,7 +498,7 @@ const _NotchedElement = class _NotchedElement extends HTMLElement {
|
|
|
462
498
|
elementResizer.unsubscribe(__privateGet(this, _resizeListener));
|
|
463
499
|
}
|
|
464
500
|
};
|
|
465
|
-
_imageElement = new WeakMap(), _clipId = new WeakMap(), _resizeListener = new WeakMap(), _NotchedElement_instances = new WeakSet(), parseCSSNotchValue_fn = /* @__PURE__ */ __name(function(value) {
|
|
501
|
+
_imageElement = new WeakMap(), _svgElement = new WeakMap(), _clipId = new WeakMap(), _clipPathId = new WeakMap(), _resizeListener = new WeakMap(), _NotchedElement_instances = new WeakSet(), parseCSSNotchValue_fn = /* @__PURE__ */ __name(function(value) {
|
|
466
502
|
const notchesString = value.split(",").map((v) => v.trim()).filter((v) => !!v), notches = [];
|
|
467
503
|
return notchesString.forEach((notchString) => {
|
|
468
504
|
const valuesStrings = notchString.split(" ").map((v) => v.trim()).filter((v) => !!v);
|