@e1011/es-kit 1.0.172 → 1.0.175
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/dist/hooks/esm/index.css +41 -41
- package/dist/hooks/esm/src/core/hooks/useThemePreference.js +1 -1
- package/dist/hooks/esm/src/core/hooks/useThemePreference.js.map +1 -1
- package/dist/hooks/index.css +41 -41
- package/dist/hooks/src/core/hooks/useThemePreference.js +1 -1
- package/dist/hooks/src/core/hooks/useThemePreference.js.map +1 -1
- package/dist/lib/cjs/index.css +1 -1
- package/dist/lib/cjs/src/core/hooks/useThemePreference.js +1 -1
- package/dist/lib/cjs/src/core/hooks/useThemePreference.js.map +1 -1
- package/dist/lib/cjs/src/core/ui/components/container/LayoutBox.js +1 -1
- package/dist/lib/cjs/src/core/ui/components/container/LayoutBox.js.map +1 -1
- package/dist/lib/cjs/src/core/ui/components/container/layoutBox.module.scss.js +1 -1
- package/dist/lib/cjs/src/core/ui/components/icon/IconWC.js +1 -1
- package/dist/lib/cjs/src/core/ui/components/icon/IconWC.js.map +1 -1
- package/dist/lib/cjs/src/index.js +1 -1
- package/dist/lib/esm/index.css +1 -1
- package/dist/lib/esm/src/core/hooks/useThemePreference.js +1 -1
- package/dist/lib/esm/src/core/hooks/useThemePreference.js.map +1 -1
- package/dist/lib/esm/src/core/ui/components/container/LayoutBox.js +1 -1
- package/dist/lib/esm/src/core/ui/components/container/LayoutBox.js.map +1 -1
- package/dist/lib/esm/src/core/ui/components/container/layoutBox.module.scss.js +1 -1
- package/dist/lib/esm/src/core/ui/components/icon/IconWC.js +1 -1
- package/dist/lib/esm/src/core/ui/components/icon/IconWC.js.map +1 -1
- package/dist/lib/esm/src/index.js +1 -1
- package/dist/lib/src/core/hooks/useThemePreference.js +1 -1
- package/dist/lib/src/core/ui/components/container/LayoutBox.js +1 -1
- package/dist/lib/src/core/ui/components/container/LayoutBox.js.map +1 -1
- package/dist/lib/src/core/ui/components/icon/IconWC.js +8 -8
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/types/src/core/ui/components/icon/IconWC.d.ts +3 -3
- package/dist/ui/esm/index.css +1 -1
- package/dist/ui/esm/src/core/ui/components/container/LayoutBox.js +1 -1
- package/dist/ui/esm/src/core/ui/components/container/LayoutBox.js.map +1 -1
- package/dist/ui/esm/src/core/ui/components/container/layoutBox.module.scss.js +1 -1
- package/dist/ui/esm/src/core/ui/components/icon/IconWC.js +1 -1
- package/dist/ui/esm/src/core/ui/components/icon/IconWC.js.map +1 -1
- package/dist/ui/esm/src/core/ui/index.js +1 -1
- package/dist/ui/index.css +1 -1
- package/dist/ui/src/core/ui/components/container/LayoutBox.js +1 -1
- package/dist/ui/src/core/ui/components/container/LayoutBox.js.map +1 -1
- package/dist/ui/src/core/ui/components/container/layoutBox.module.scss.js +1 -1
- package/dist/ui/src/core/ui/components/icon/IconWC.js +1 -1
- package/dist/ui/src/core/ui/components/icon/IconWC.js.map +1 -1
- package/dist/ui/src/core/ui/index.js +1 -1
- package/dist/utils/esm/index.css +41 -41
- package/dist/utils/index.css +41 -41
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ export type IconBaseWCType = {
|
|
|
9
9
|
color?: string;
|
|
10
10
|
className?: string;
|
|
11
11
|
};
|
|
12
|
-
export declare class
|
|
12
|
+
export declare class ESIcon extends HTMLElement {
|
|
13
13
|
content: string | null;
|
|
14
14
|
mainElement: HTMLElement;
|
|
15
15
|
iconUrl?: string | null;
|
|
@@ -32,7 +32,7 @@ declare global {
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
export declare const
|
|
36
|
-
|
|
35
|
+
export declare const ESIconBase: {
|
|
36
|
+
ESIconBase: typeof ESIcon;
|
|
37
37
|
};
|
|
38
38
|
//# sourceMappingURL=IconWC.d.ts.map
|
package/dist/ui/esm/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{extends as t}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as e,forwardRef as o,useMemo as a}from"react";import{useParseProps as s}from"../../../hooks/useParseProps.js";import{LayoutDirection as l}from"./layoutBox.types.js";import r from"./layoutBox.module.scss.js";const n={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},i=t=>t&&n[t]||t,d=o(((e,o)=>{let{id:n,style:d,children:c,tabIndex:
|
|
1
|
+
import{extends as t}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import{memo as e,forwardRef as o,useMemo as a}from"react";import{useParseProps as s}from"../../../hooks/useParseProps.js";import{LayoutDirection as l}from"./layoutBox.types.js";import r from"./layoutBox.module.scss.js";const n={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},i=t=>t&&n[t]||t,d=o(((e,o)=>{let{id:n,style:d,children:c,tabIndex:m,className:f="",onClick:u,column:x,...p}=e;const{dataProps:y,restProps:j}=s(p),b=a((()=>u?{onClick:u,onKeyDown:u,role:"button",tabIndex:-1}:{}),[u]),B=a((()=>void 0!==x&&!0===x?l.COLUMN:null),[x]),I=a((()=>({...j,...j.align?{alignItems:i(j.align)}:{},...j.justify?{justifyContent:i(j.justify)}:{},...j.direction||B?{flexDirection:j.direction||B}:{},...d})),[B,j,d]);return React.createElement("div",t({},n?{id:"".concat(n)}:{},{ref:o,tabIndex:m,className:"".concat(r["layout-box"]," ").concat(f),style:I},y,{"data-testid":y.dataTestId||y["data-testid"]||n},b),c)}));d.displayName="LayoutBoxRefForwarded";const c=e(d);c.displayName="LayoutBox";export{c as LayoutBox};
|
|
2
2
|
//# sourceMappingURL=LayoutBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined) => {\n const { dataProps, restProps } = useParseProps(props)\n\n /**\n * Memoized onClick event properties.\n * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n */\n const onClickProps = useMemo(() => (onClick ? ({\n onClick,\n onKeyDown: onClick,\n role: 'button',\n tabIndex: -1,\n }) : {}), [onClick])\n\n /**\n * Memoized resolved direction based on the column prop.\n * @type {LayoutDirection}\n */\n const resolvedColumn = useMemo(() => ((\n column !== undefined && column === true)\n ? LayoutDirection.COLUMN\n : null), [column])\n\n /**\n * Memoized styles combining parsed props and additional styles.\n * @type {CSSProperties}\n */\n const styles = useMemo(() => (\n {\n ...restProps,\n ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n ...style,\n }\n ), [resolvedColumn, restProps, style])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={`${(classes as any)['
|
|
1
|
+
{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined) => {\n const { dataProps, restProps } = useParseProps(props)\n\n /**\n * Memoized onClick event properties.\n * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n */\n const onClickProps = useMemo(() => (onClick ? ({\n onClick,\n onKeyDown: onClick,\n role: 'button',\n tabIndex: -1,\n }) : {}), [onClick])\n\n /**\n * Memoized resolved direction based on the column prop.\n * @type {LayoutDirection}\n */\n const resolvedColumn = useMemo(() => ((\n column !== undefined && column === true)\n ? LayoutDirection.COLUMN\n : null), [column])\n\n /**\n * Memoized styles combining parsed props and additional styles.\n * @type {CSSProperties}\n */\n const styles = useMemo(() => (\n {\n ...restProps,\n ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n ...style,\n }\n ), [resolvedColumn, restProps, style])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={`${(classes as any)['layout-box']} ${className}`}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n {...onClickProps}\n >\n {children}\n </div>\n )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"0SAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,GAAW,CAAAC,EAEtBC,KAA+C,IAFxBC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAcH,GAMzCI,EAAeC,GAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,GAAQ,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,GAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAgB,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAqBtC,GAElEqC,EAAUD,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var o={"layout-box":"layoutBox-module_layout-box__faPND"};export{o as default};
|
|
2
2
|
//# sourceMappingURL=layoutBox.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js";import{ced as t,resolveAttributes as i}from"../../../utils/webComponents/webComponent.utils.js";import e from"./icon.module.scss.js";var s;const n=document.createElement("template");n.innerHTML='<span class="icon-base"></span>';let o=t("icon-base")(s=class t extends HTMLElement{constructor(){super(...arguments),this.content=void 0,this.mainElement=void 0,this.iconUrl=void 0,this.minWidth=void 0,this.minHeight=void 0,this.width=void 0,this.height=void 0,this.size=void 0,this.fontSize=void 0,this.color=void 0,this.render=()=>{if(this.mainElement=this.mainElement||this.querySelector(".icon-base"),!this.mainElement)return;this.classList.add(e["icon-base-parent"]),this.mainElement.classList.add(e["icon-base"]);const t={"--min-width":this.minWidth||this.size||this.width||"auto","--min-height":this.minHeight||this.size||this.height||"auto","--width":this.size||this.width||"1rem","--height":this.size||this.height||"1rem",...this.fontSize?{"font-size":this.fontSize||"unset"}:{},...this.iconUrl?{"--icon-url":"url(".concat(this.iconUrl,")")}:{},...this.iconUrl?{"--icon-color":this.color}:{"--icon-content-color":this.color}};this.mainElement.innerHTML=this.iconUrl?"":this.content||"",this.mainElement.setAttribute("style",Object.entries(t).map((t=>{let[i,e]=t;return"".concat(i,": ").concat(e,";")})).join(" "))}}static get observedAttributes(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}connectedCallback(){(this.content||this.innerHTML)&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=n.innerHTML,i(this,t.observedAttributes),this.render()}attributeChangedCallback(t,i,e){"className"!==t&&"classname"!==t&&"class"!==t||"string"==typeof e&&(this.classList.remove(e),this.classList.add(e)),this.color||(this.color="currentColor"),this[t]=e||"",this.render()}})||s;const h={
|
|
1
|
+
import"../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js";import{ced as t,resolveAttributes as i}from"../../../utils/webComponents/webComponent.utils.js";import e from"./icon.module.scss.js";var s;const n=document.createElement("template");n.innerHTML='<span class="icon-base"></span>';let o=t("icon-base")(s=class t extends HTMLElement{constructor(){super(...arguments),this.content=void 0,this.mainElement=void 0,this.iconUrl=void 0,this.minWidth=void 0,this.minHeight=void 0,this.width=void 0,this.height=void 0,this.size=void 0,this.fontSize=void 0,this.color=void 0,this.render=()=>{if(this.mainElement=this.mainElement||this.querySelector(".icon-base"),!this.mainElement)return;this.classList.add(e["icon-base-parent"]),this.mainElement.classList.add(e["icon-base"]);const t={"--min-width":this.minWidth||this.size||this.width||"auto","--min-height":this.minHeight||this.size||this.height||"auto","--width":this.size||this.width||"1rem","--height":this.size||this.height||"1rem",...this.fontSize?{"font-size":this.fontSize||"unset"}:{},...this.iconUrl?{"--icon-url":"url(".concat(this.iconUrl,")")}:{},...this.iconUrl?{"--icon-color":this.color}:{"--icon-content-color":this.color}};this.mainElement.innerHTML=this.iconUrl?"":this.content||"",this.mainElement.setAttribute("style",Object.entries(t).map((t=>{let[i,e]=t;return"".concat(i,": ").concat(e,";")})).join(" "))}}static get observedAttributes(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}connectedCallback(){(this.content||this.innerHTML)&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=n.innerHTML,i(this,t.observedAttributes),this.render()}attributeChangedCallback(t,i,e){"className"!==t&&"classname"!==t&&"class"!==t||"string"==typeof e&&(this.classList.remove(e),this.classList.add(e)),this.color||(this.color="currentColor"),this[t]=e||"",this.render()}})||s;const h={ESIconBase:o};export{o as ESIcon,h as ESIconBase};
|
|
2
2
|
//# sourceMappingURL=IconWC.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWC.js","sources":["../../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import { ced, resolveAttributes } from '../../../utils/webComponents/webComponent.utils'\n\nimport classes from './icon.module.scss'\n\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n iconUrl?: string\n minWidth?: string\n minHeight?: string\n width?: string\n height?: string\n size?: string\n fontSize?: string\n color?: string\n className?: string\n}\n\n@ced('icon-base')\nexport class
|
|
1
|
+
{"version":3,"file":"IconWC.js","sources":["../../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import { ced, resolveAttributes } from '../../../utils/webComponents/webComponent.utils'\n\nimport classes from './icon.module.scss'\n\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n iconUrl?: string\n minWidth?: string\n minHeight?: string\n width?: string\n height?: string\n size?: string\n fontSize?: string\n color?: string\n className?: string\n}\n\n@ced('icon-base')\nexport class ESIcon extends HTMLElement {\n content: string | null\n\n mainElement: HTMLElement\n\n iconUrl?: string | null\n\n minWidth?: string | null\n\n minHeight?: string | null\n\n width?: string | null\n\n height?: string | null\n\n size?: string | null\n\n fontSize?: string | null\n\n color?: string | null\n\n static get observedAttributes() {\n return ['iconUrl', 'minWidth', 'minHeight', 'width', 'height', 'size', 'fontSize', 'color', 'className']\n }\n\n connectedCallback() {\n if (this.content || this.innerHTML) {\n this.content = this.content || this.innerHTML || this.getAttribute('content')\n }\n\n this.innerHTML = template.innerHTML\n\n resolveAttributes(this, ESIcon.observedAttributes)\n\n this.render()\n }\n\n attributeChangedCallback(attrName: string, oldVal: string | number | null, newVal: string | number | null) {\n if (attrName === 'className' || attrName === 'classname' || attrName === 'class') {\n if (typeof newVal === 'string') {\n this.classList.remove(newVal as string)\n this.classList.add(newVal as string)\n }\n }\n if (!this.color) {\n this.color = 'currentColor'\n }\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this[attrName] = (newVal as string) || ''\n this.render()\n }\n\n render = () => {\n this.mainElement = this.mainElement || this.querySelector('.icon-base') as HTMLElement\n if (!this.mainElement) {\n return\n }\n this.classList.add(classes['icon-base-parent'])\n this.mainElement.classList.add(classes['icon-base'])\n\n const styles = {\n '--min-width': this.minWidth || this.size || this.width || 'auto',\n '--min-height': this.minHeight || this.size || this.height || 'auto',\n '--width': this.size || this.width || '1rem',\n '--height': this.size || this.height || '1rem',\n ...(this.fontSize ? { 'font-size': this.fontSize || 'unset' } : {}),\n ...(this.iconUrl ? { '--icon-url': `url(${this.iconUrl})` } : {}),\n ...(this.iconUrl ? { '--icon-color': this.color } : { '--icon-content-color': this.color }),\n }\n\n this.mainElement.innerHTML = this.iconUrl ? '' : (this.content || '')\n\n this.mainElement.setAttribute('style', Object.entries(styles).map(([key, value]) => `${key}: ${value};`).join(' '))\n }\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'icon-base': any\n }\n }\n}\n\nexport const ESIconBase = {\n ESIconBase: ESIcon,\n}\n"],"names":["template","document","createElement","innerHTML","ESIcon","ced","_dec","_class","HTMLElement","constructor","super","arguments","this","content","mainElement","iconUrl","minWidth","minHeight","width","height","size","fontSize","color","render","querySelector","classList","add","classes","styles","concat","setAttribute","Object","entries","map","_ref","key","value","join","observedAttributes","connectedCallback","getAttribute","resolveAttributes","attributeChangedCallback","attrName","oldVal","newVal","remove","ESIconBase"],"mappings":"+NAKA,MAAMA,EAAWC,SAASC,cAAc,YAExCF,EAASG,UAAY,kCAcrB,IACaC,EADZC,EAAI,YAAYC,CAAAC,EAAjB,MACaH,UAAeI,YAAYC,WAAAA,GAAAC,SAAAC,WAAAC,KACtCC,aAAO,EAAAD,KAEPE,iBAAW,EAAAF,KAEXG,aAAO,EAAAH,KAEPI,cAAQ,EAAAJ,KAERK,eAAS,EAAAL,KAETM,WAAK,EAAAN,KAELO,YAAM,EAAAP,KAENQ,UAAI,EAAAR,KAEJS,cAAQ,EAAAT,KAERU,WAAK,EAAAV,KAkCLW,OAAS,KAEP,GADAX,KAAKE,YAAcF,KAAKE,aAAeF,KAAKY,cAAc,eACrDZ,KAAKE,YACR,OAEFF,KAAKa,UAAUC,IAAIC,EAAQ,qBAC3Bf,KAAKE,YAAYW,UAAUC,IAAIC,EAAQ,cAEvC,MAAMC,EAAS,CACb,cAAehB,KAAKI,UAAYJ,KAAKQ,MAAQR,KAAKM,OAAS,OAC3D,eAAgBN,KAAKK,WAAaL,KAAKQ,MAAQR,KAAKO,QAAU,OAC9D,UAAWP,KAAKQ,MAAQR,KAAKM,OAAS,OACtC,WAAYN,KAAKQ,MAAQR,KAAKO,QAAU,UACpCP,KAAKS,SAAW,CAAE,YAAaT,KAAKS,UAAY,SAAY,MAC5DT,KAAKG,QAAU,CAAE,aAAYc,OAAAA,OAASjB,KAAKG,QAAO,MAAQ,MAC1DH,KAAKG,QAAU,CAAE,eAAgBH,KAAKU,OAAU,CAAE,uBAAwBV,KAAKU,QAGrFV,KAAKE,YAAYX,UAAYS,KAAKG,QAAU,GAAMH,KAAKC,SAAW,GAElED,KAAKE,YAAYgB,aAAa,QAASC,OAAOC,QAAQJ,GAAQK,KAAIC,IAAA,IAAEC,EAAKC,GAAMF,EAAA,MAAA,GAAAL,OAAQM,EAAGN,MAAAA,OAAKO,EAAK,IAAA,IAAKC,KAAK,KAAK,CACpH,CArDD,6BAAWC,GACT,MAAO,CAAC,UAAW,WAAY,YAAa,QAAS,SAAU,OAAQ,WAAY,QAAS,YAC9F,CAEAC,iBAAAA,IACM3B,KAAKC,SAAWD,KAAKT,aACvBS,KAAKC,QAAUD,KAAKC,SAAWD,KAAKT,WAAaS,KAAK4B,aAAa,YAGrE5B,KAAKT,UAAYH,EAASG,UAE1BsC,EAAkB7B,KAAMR,EAAOkC,oBAE/B1B,KAAKW,QACP,CAEAmB,wBAAAA,CAAyBC,EAAkBC,EAAgCC,GACxD,cAAbF,GAAyC,cAAbA,GAAyC,UAAbA,GACpC,iBAAXE,IACTjC,KAAKa,UAAUqB,OAAOD,GACtBjC,KAAKa,UAAUC,IAAImB,IAGlBjC,KAAKU,QACRV,KAAKU,MAAQ,gBAIfV,KAAK+B,GAAaE,GAAqB,GACvCjC,KAAKW,QACP,KAwBDhB,EAWM,MAAMwC,EAAa,CACxBA,WAAY3C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./utils/style.js";export{LayoutBox}from"./components/container/LayoutBox.js";export{LayoutDirection}from"./components/container/layoutBox.types.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./components/container/Flex.js";export{Placeholder}from"./components/container/Placeholder.js";export{CollapsibleContainer}from"./components/container/CollapsibleContainer.js";export{ResizableContainer}from"./components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./components/dividers/DividerLine.js";export{IconBase}from"./components/icon/IconBase.js";export{Icon}from"./components/icon/Icon.js";export{
|
|
1
|
+
export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./utils/style.js";export{LayoutBox}from"./components/container/LayoutBox.js";export{LayoutDirection}from"./components/container/layoutBox.types.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./components/container/Flex.js";export{Placeholder}from"./components/container/Placeholder.js";export{CollapsibleContainer}from"./components/container/CollapsibleContainer.js";export{ResizableContainer}from"./components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./components/dividers/DividerLine.js";export{IconBase}from"./components/icon/IconBase.js";export{Icon}from"./components/icon/Icon.js";export{ESIcon,ESIconBase}from"./components/icon/IconWC.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/ui/index.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),t=require("react"),o=require("../../../hooks/useParseProps.js"),s=require("./layoutBox.types.js"),a=require("./layoutBox.module.scss.js");const r={start:"flex-start","flex-start":"flex-start",end:"flex-end","flex-end":"flex-end"},l=e=>e&&r[e]||e,n=t.forwardRef(((r,n)=>{let{id:i,style:u,children:d,tabIndex:c,className:x="",onClick:y,column:f,...m}=r;const{dataProps:p,restProps:j}=o.useParseProps(m),P=t.useMemo((()=>y?{onClick:y,onKeyDown:y,role:"button",tabIndex:-1}:{}),[y]),b=t.useMemo((()=>void 0!==f&&!0===f?s.LayoutDirection.COLUMN:null),[f]),B=t.useMemo((()=>({...j,...j.align?{alignItems:l(j.align)}:{},...j.justify?{justifyContent:l(j.justify)}:{},...j.direction||b?{flexDirection:j.direction||b}:{},...u})),[b,j,u]);return React.createElement("div",e.extends({},i?{id:"".concat(i)}:{},{ref:n,tabIndex:c,className:"".concat(a.default["layout-box"]," ").concat(x),style:B},p,{"data-testid":p.dataTestId||p["data-testid"]||i},P),d)}));n.displayName="LayoutBoxRefForwarded";const i=t.memo(n);i.displayName="LayoutBox",exports.LayoutBox=i;
|
|
2
2
|
//# sourceMappingURL=LayoutBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined) => {\n const { dataProps, restProps } = useParseProps(props)\n\n /**\n * Memoized onClick event properties.\n * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n */\n const onClickProps = useMemo(() => (onClick ? ({\n onClick,\n onKeyDown: onClick,\n role: 'button',\n tabIndex: -1,\n }) : {}), [onClick])\n\n /**\n * Memoized resolved direction based on the column prop.\n * @type {LayoutDirection}\n */\n const resolvedColumn = useMemo(() => ((\n column !== undefined && column === true)\n ? LayoutDirection.COLUMN\n : null), [column])\n\n /**\n * Memoized styles combining parsed props and additional styles.\n * @type {CSSProperties}\n */\n const styles = useMemo(() => (\n {\n ...restProps,\n ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n ...style,\n }\n ), [resolvedColumn, restProps, style])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={`${(classes as any)['
|
|
1
|
+
{"version":3,"file":"LayoutBox.js","sources":["../../../../../../../src/core/ui/components/container/LayoutBox.tsx"],"sourcesContent":["import { memo, FC, useMemo, CSSProperties, forwardRef, LegacyRef } from 'react'\n\nimport { useParseProps } from '../../../hooks/useParseProps'\n\nimport { LayoutDirection, LayoutBoxProps } from './layoutBox.types'\nimport classes from './layoutBox.module.scss'\n\n\n/**\n * Map of flex values for resolving flex alignment and justification.\n * @type {Record<string, string>}\n */\nconst flexValueMap: Record<string, string> = {\n start: 'flex-start',\n 'flex-start': 'flex-start',\n end: 'flex-end',\n 'flex-end': 'flex-end',\n}\n\n/**\n * Resolves flex alignment and justification properties based on the provided value.\n * @param {string | undefined} value - The value to resolve.\n * @returns {string | undefined} - Resolved flex property value.\n */\nconst resolveFlexProps = (value?: string): string | undefined => (value ? (flexValueMap[value] || value) : value)\n\n/**\n * Forwarded ref version of the LayoutBox component.\n * @param {LayoutBoxProps} props - Props for the LayoutBox component.\n * @param {LegacyRef<HTMLDivElement> | undefined} ref - Ref for accessing the underlying DOM element.\n * @returns {JSX.Element} - Rendered LayoutBox component.\n */\nconst LayoutBoxRefForwarded = forwardRef(({\n id, style, children, tabIndex, className = '', onClick, column, ...props\n}: LayoutBoxProps, ref: LegacyRef<HTMLDivElement> | undefined) => {\n const { dataProps, restProps } = useParseProps(props)\n\n /**\n * Memoized onClick event properties.\n * @type {{ onClick?: () => void; onKeyDown?: () => void; role?: string; tabIndex?: number }}\n */\n const onClickProps = useMemo(() => (onClick ? ({\n onClick,\n onKeyDown: onClick,\n role: 'button',\n tabIndex: -1,\n }) : {}), [onClick])\n\n /**\n * Memoized resolved direction based on the column prop.\n * @type {LayoutDirection}\n */\n const resolvedColumn = useMemo(() => ((\n column !== undefined && column === true)\n ? LayoutDirection.COLUMN\n : null), [column])\n\n /**\n * Memoized styles combining parsed props and additional styles.\n * @type {CSSProperties}\n */\n const styles = useMemo(() => (\n {\n ...restProps,\n ...(restProps.align ? { alignItems: resolveFlexProps(restProps.align as string) } : {}),\n ...(restProps.justify ? { justifyContent: resolveFlexProps(restProps.justify as string) } : {}),\n ...(restProps.direction || resolvedColumn ? { flexDirection: restProps.direction || resolvedColumn } : {}),\n ...style,\n }\n ), [resolvedColumn, restProps, style])\n\n return (\n <div\n {...(id ? { id: `${id}` } : {})}\n ref={ref}\n tabIndex={tabIndex}\n className={`${(classes as any)['layout-box']} ${className}`}\n style={styles as CSSProperties}\n {...dataProps}\n data-testid={dataProps.dataTestId || dataProps['data-testid'] || id}\n {...onClickProps}\n >\n {children}\n </div>\n )\n})\n\nLayoutBoxRefForwarded.displayName = 'LayoutBoxRefForwarded'\n\n/**\n * Memoized and memoized LayoutBox component.\n * @type {FC<LayoutBoxProps>}\n */\nexport const LayoutBox: FC<LayoutBoxProps> = memo<LayoutBoxProps>(LayoutBoxRefForwarded)\n\nLayoutBox.displayName = 'LayoutBox'\n"],"names":["flexValueMap","start","end","resolveFlexProps","value","LayoutBoxRefForwarded","forwardRef","_ref","ref","id","style","children","tabIndex","className","onClick","column","props","dataProps","restProps","useParseProps","onClickProps","useMemo","onKeyDown","role","resolvedColumn","undefined","LayoutDirection","COLUMN","styles","align","alignItems","justify","justifyContent","direction","flexDirection","React","createElement","_extends","concat","classes","dataTestId","displayName","LayoutBox","memo"],"mappings":"oRAYA,MAAMA,EAAuC,CAC3CC,MAAO,aACP,aAAc,aACdC,IAAK,WACL,WAAY,YAQRC,EAAoBC,GAAwCA,GAASJ,EAAaI,IAAmBA,EAQrGC,EAAwBC,EAAUA,YAAC,CAAAC,EAEtBC,KAA+C,IAFxBC,GACxCA,EAAEC,MAAEA,EAAKC,SAAEA,EAAQC,SAAEA,EAAQC,UAAEA,EAAY,GAAEC,QAAEA,EAAOC,OAAEA,KAAWC,GACpDT,EACf,MAAMU,UAAEA,EAASC,UAAEA,GAAcC,EAAAA,cAAcH,GAMzCI,EAAeC,WAAQ,IAAOP,EAAW,CAC7CA,UACAQ,UAAWR,EACXS,KAAM,SACNX,UAAW,GACR,CAAG,GAAE,CAACE,IAMLU,EAAiBH,EAAOA,SAAC,SAClBI,IAAXV,IAAmC,IAAXA,EACtBW,EAAAA,gBAAgBC,OAChB,MAAO,CAACZ,IAMNa,EAASP,EAAAA,SAAQ,KACrB,IACKH,KACCA,EAAUW,MAAQ,CAAEC,WAAY3B,EAAiBe,EAAUW,QAAqB,MAChFX,EAAUa,QAAU,CAAEC,eAAgB7B,EAAiBe,EAAUa,UAAuB,MACxFb,EAAUe,WAAaT,EAAiB,CAAEU,cAAehB,EAAUe,WAAaT,GAAmB,MACpGd,KAEJ,CAACc,EAAgBN,EAAWR,IAE/B,OACEyB,MAAAC,oBAAAC,EAAAA,QAAA,CAAA,EACO5B,EAAK,CAAEA,GAAE,GAAA6B,OAAK7B,IAAS,GAAE,CAC9BD,IAAKA,EACLI,SAAUA,EACVC,UAAS,GAAAyB,OAAMC,EAAO,QAAS,cAAaD,KAAAA,OAAIzB,GAChDH,MAAOkB,GACHX,EAAS,CACb,cAAaA,EAAUuB,YAAcvB,EAAU,gBAAkBR,GAC7DW,GAEHT,EACG,IAIVN,EAAsBoC,YAAc,8BAMvBC,EAAgCC,EAAIA,KAAiBtC,GAElEqC,EAAUD,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={"
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default={"layout-box":"layoutBox-module_layout-box__faPND"};
|
|
2
2
|
//# sourceMappingURL=layoutBox.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var t,i=require("../../../utils/webComponents/webComponent.utils.js"),e=require("./icon.module.scss.js");const s=document.createElement("template");s.innerHTML='<span class="icon-base"></span>';let n=i.ced("icon-base")(t=class t extends HTMLElement{constructor(){super(...arguments),this.content=void 0,this.mainElement=void 0,this.iconUrl=void 0,this.minWidth=void 0,this.minHeight=void 0,this.width=void 0,this.height=void 0,this.size=void 0,this.fontSize=void 0,this.color=void 0,this.render=()=>{if(this.mainElement=this.mainElement||this.querySelector(".icon-base"),!this.mainElement)return;this.classList.add(e.default["icon-base-parent"]),this.mainElement.classList.add(e.default["icon-base"]);const t={"--min-width":this.minWidth||this.size||this.width||"auto","--min-height":this.minHeight||this.size||this.height||"auto","--width":this.size||this.width||"1rem","--height":this.size||this.height||"1rem",...this.fontSize?{"font-size":this.fontSize||"unset"}:{},...this.iconUrl?{"--icon-url":"url(".concat(this.iconUrl,")")}:{},...this.iconUrl?{"--icon-color":this.color}:{"--icon-content-color":this.color}};this.mainElement.innerHTML=this.iconUrl?"":this.content||"",this.mainElement.setAttribute("style",Object.entries(t).map((t=>{let[i,e]=t;return"".concat(i,": ").concat(e,";")})).join(" "))}}static get observedAttributes(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}connectedCallback(){(this.content||this.innerHTML)&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=s.innerHTML,i.resolveAttributes(this,t.observedAttributes),this.render()}attributeChangedCallback(t,i,e){"className"!==t&&"classname"!==t&&"class"!==t||"string"==typeof e&&(this.classList.remove(e),this.classList.add(e)),this.color||(this.color="currentColor"),this[t]=e||"",this.render()}})||t;const o={
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("../../../../../node_modules/core-js/modules/web.dom-collections.iterator.js");var t,i=require("../../../utils/webComponents/webComponent.utils.js"),e=require("./icon.module.scss.js");const s=document.createElement("template");s.innerHTML='<span class="icon-base"></span>';let n=i.ced("icon-base")(t=class t extends HTMLElement{constructor(){super(...arguments),this.content=void 0,this.mainElement=void 0,this.iconUrl=void 0,this.minWidth=void 0,this.minHeight=void 0,this.width=void 0,this.height=void 0,this.size=void 0,this.fontSize=void 0,this.color=void 0,this.render=()=>{if(this.mainElement=this.mainElement||this.querySelector(".icon-base"),!this.mainElement)return;this.classList.add(e.default["icon-base-parent"]),this.mainElement.classList.add(e.default["icon-base"]);const t={"--min-width":this.minWidth||this.size||this.width||"auto","--min-height":this.minHeight||this.size||this.height||"auto","--width":this.size||this.width||"1rem","--height":this.size||this.height||"1rem",...this.fontSize?{"font-size":this.fontSize||"unset"}:{},...this.iconUrl?{"--icon-url":"url(".concat(this.iconUrl,")")}:{},...this.iconUrl?{"--icon-color":this.color}:{"--icon-content-color":this.color}};this.mainElement.innerHTML=this.iconUrl?"":this.content||"",this.mainElement.setAttribute("style",Object.entries(t).map((t=>{let[i,e]=t;return"".concat(i,": ").concat(e,";")})).join(" "))}}static get observedAttributes(){return["iconUrl","minWidth","minHeight","width","height","size","fontSize","color","className"]}connectedCallback(){(this.content||this.innerHTML)&&(this.content=this.content||this.innerHTML||this.getAttribute("content")),this.innerHTML=s.innerHTML,i.resolveAttributes(this,t.observedAttributes),this.render()}attributeChangedCallback(t,i,e){"className"!==t&&"classname"!==t&&"class"!==t||"string"==typeof e&&(this.classList.remove(e),this.classList.add(e)),this.color||(this.color="currentColor"),this[t]=e||"",this.render()}})||t;const o={ESIconBase:n};exports.ESIcon=n,exports.ESIconBase=o;
|
|
2
2
|
//# sourceMappingURL=IconWC.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconWC.js","sources":["../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import { ced, resolveAttributes } from '../../../utils/webComponents/webComponent.utils'\n\nimport classes from './icon.module.scss'\n\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n iconUrl?: string\n minWidth?: string\n minHeight?: string\n width?: string\n height?: string\n size?: string\n fontSize?: string\n color?: string\n className?: string\n}\n\n@ced('icon-base')\nexport class
|
|
1
|
+
{"version":3,"file":"IconWC.js","sources":["../../../../../../../src/core/ui/components/icon/IconWC.ts"],"sourcesContent":["import { ced, resolveAttributes } from '../../../utils/webComponents/webComponent.utils'\n\nimport classes from './icon.module.scss'\n\n\nconst template = document.createElement('template')\n\ntemplate.innerHTML = '<span class=\"icon-base\"></span>'\n\nexport type IconBaseWCType = {\n iconUrl?: string\n minWidth?: string\n minHeight?: string\n width?: string\n height?: string\n size?: string\n fontSize?: string\n color?: string\n className?: string\n}\n\n@ced('icon-base')\nexport class ESIcon extends HTMLElement {\n content: string | null\n\n mainElement: HTMLElement\n\n iconUrl?: string | null\n\n minWidth?: string | null\n\n minHeight?: string | null\n\n width?: string | null\n\n height?: string | null\n\n size?: string | null\n\n fontSize?: string | null\n\n color?: string | null\n\n static get observedAttributes() {\n return ['iconUrl', 'minWidth', 'minHeight', 'width', 'height', 'size', 'fontSize', 'color', 'className']\n }\n\n connectedCallback() {\n if (this.content || this.innerHTML) {\n this.content = this.content || this.innerHTML || this.getAttribute('content')\n }\n\n this.innerHTML = template.innerHTML\n\n resolveAttributes(this, ESIcon.observedAttributes)\n\n this.render()\n }\n\n attributeChangedCallback(attrName: string, oldVal: string | number | null, newVal: string | number | null) {\n if (attrName === 'className' || attrName === 'classname' || attrName === 'class') {\n if (typeof newVal === 'string') {\n this.classList.remove(newVal as string)\n this.classList.add(newVal as string)\n }\n }\n if (!this.color) {\n this.color = 'currentColor'\n }\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this[attrName] = (newVal as string) || ''\n this.render()\n }\n\n render = () => {\n this.mainElement = this.mainElement || this.querySelector('.icon-base') as HTMLElement\n if (!this.mainElement) {\n return\n }\n this.classList.add(classes['icon-base-parent'])\n this.mainElement.classList.add(classes['icon-base'])\n\n const styles = {\n '--min-width': this.minWidth || this.size || this.width || 'auto',\n '--min-height': this.minHeight || this.size || this.height || 'auto',\n '--width': this.size || this.width || '1rem',\n '--height': this.size || this.height || '1rem',\n ...(this.fontSize ? { 'font-size': this.fontSize || 'unset' } : {}),\n ...(this.iconUrl ? { '--icon-url': `url(${this.iconUrl})` } : {}),\n ...(this.iconUrl ? { '--icon-color': this.color } : { '--icon-content-color': this.color }),\n }\n\n this.mainElement.innerHTML = this.iconUrl ? '' : (this.content || '')\n\n this.mainElement.setAttribute('style', Object.entries(styles).map(([key, value]) => `${key}: ${value};`).join(' '))\n }\n}\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'icon-base': any\n }\n }\n}\n\nexport const ESIconBase = {\n ESIconBase: ESIcon,\n}\n"],"names":["template","document","createElement","innerHTML","ESIcon","ced","_dec","_class","HTMLElement","constructor","super","arguments","this","content","mainElement","iconUrl","minWidth","minHeight","width","height","size","fontSize","color","render","querySelector","classList","add","classes","styles","concat","setAttribute","Object","entries","map","_ref","key","value","join","observedAttributes","connectedCallback","getAttribute","resolveAttributes","attributeChangedCallback","attrName","oldVal","newVal","remove","ESIconBase"],"mappings":"oQAKA,MAAMA,EAAWC,SAASC,cAAc,YAExCF,EAASG,UAAY,kCAcrB,IACaC,EADZC,EAAAA,IAAI,YAAYC,CAAAC,EAAjB,MACaH,UAAeI,YAAYC,WAAAA,GAAAC,SAAAC,WAAAC,KACtCC,aAAO,EAAAD,KAEPE,iBAAW,EAAAF,KAEXG,aAAO,EAAAH,KAEPI,cAAQ,EAAAJ,KAERK,eAAS,EAAAL,KAETM,WAAK,EAAAN,KAELO,YAAM,EAAAP,KAENQ,UAAI,EAAAR,KAEJS,cAAQ,EAAAT,KAERU,WAAK,EAAAV,KAkCLW,OAAS,KAEP,GADAX,KAAKE,YAAcF,KAAKE,aAAeF,KAAKY,cAAc,eACrDZ,KAAKE,YACR,OAEFF,KAAKa,UAAUC,IAAIC,EAAAA,QAAQ,qBAC3Bf,KAAKE,YAAYW,UAAUC,IAAIC,EAAO,QAAC,cAEvC,MAAMC,EAAS,CACb,cAAehB,KAAKI,UAAYJ,KAAKQ,MAAQR,KAAKM,OAAS,OAC3D,eAAgBN,KAAKK,WAAaL,KAAKQ,MAAQR,KAAKO,QAAU,OAC9D,UAAWP,KAAKQ,MAAQR,KAAKM,OAAS,OACtC,WAAYN,KAAKQ,MAAQR,KAAKO,QAAU,UACpCP,KAAKS,SAAW,CAAE,YAAaT,KAAKS,UAAY,SAAY,MAC5DT,KAAKG,QAAU,CAAE,aAAYc,OAAAA,OAASjB,KAAKG,QAAO,MAAQ,MAC1DH,KAAKG,QAAU,CAAE,eAAgBH,KAAKU,OAAU,CAAE,uBAAwBV,KAAKU,QAGrFV,KAAKE,YAAYX,UAAYS,KAAKG,QAAU,GAAMH,KAAKC,SAAW,GAElED,KAAKE,YAAYgB,aAAa,QAASC,OAAOC,QAAQJ,GAAQK,KAAIC,IAAA,IAAEC,EAAKC,GAAMF,EAAA,MAAA,GAAAL,OAAQM,EAAGN,MAAAA,OAAKO,EAAK,IAAA,IAAKC,KAAK,KAAK,CACpH,CArDD,6BAAWC,GACT,MAAO,CAAC,UAAW,WAAY,YAAa,QAAS,SAAU,OAAQ,WAAY,QAAS,YAC9F,CAEAC,iBAAAA,IACM3B,KAAKC,SAAWD,KAAKT,aACvBS,KAAKC,QAAUD,KAAKC,SAAWD,KAAKT,WAAaS,KAAK4B,aAAa,YAGrE5B,KAAKT,UAAYH,EAASG,UAE1BsC,EAAAA,kBAAkB7B,KAAMR,EAAOkC,oBAE/B1B,KAAKW,QACP,CAEAmB,wBAAAA,CAAyBC,EAAkBC,EAAgCC,GACxD,cAAbF,GAAyC,cAAbA,GAAyC,UAAbA,GACpC,iBAAXE,IACTjC,KAAKa,UAAUqB,OAAOD,GACtBjC,KAAKa,UAAUC,IAAImB,IAGlBjC,KAAKU,QACRV,KAAKU,MAAQ,gBAIfV,KAAK+B,GAAaE,GAAqB,GACvCjC,KAAKW,QACP,KAwBDhB,EAWM,MAAMwC,EAAa,CACxBA,WAAY3C"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./utils/style.js"),o=require("./components/container/LayoutBox.js"),r=require("./components/container/layoutBox.types.js"),t=require("./components/container/Flex.js"),n=require("./components/container/Placeholder.js"),s=require("./components/container/CollapsibleContainer.js"),i=require("./components/container/ResizableContainer.js"),l=require("./components/field/Field.js"),c=require("./components/dividers/DividerLine.js"),p=require("./components/icon/IconBase.js"),a=require("./components/icon/Icon.js"),x=require("./components/icon/IconWC.js");exports.calculateColors=e.calculateColors,exports.calculatePercColor=e.calculatePercColor,exports.convertHex=e.convertHex,exports.convertRGB=e.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return e.defaultFontSize}}),exports.pxToRem=e.pxToRem,exports.resolveStyleValue=e.resolveStyleValue,exports.setDefaultFontSize=e.setDefaultFontSize,exports.toHex=e.toHex,exports.LayoutBox=o.LayoutBox,exports.LayoutDirection=r.LayoutDirection,exports.Flex=t.Flex,exports.FlexTight=t.FlexTight,exports.FlexTightStyled=t.FlexTightStyled,exports.FlexWrapper=t.FlexWrapper,exports.Placeholder=n.Placeholder,exports.CollapsibleContainer=s.CollapsibleContainer,exports.ResizableContainer=i.ResizableContainer,exports.Field=l.Field,exports.FieldWrapper=l.FieldWrapper,exports.Select=l.Select,exports.setIconColor=l.setIconColor,exports.setIconComponent=l.setIconComponent,exports.DividerHorizontal=c.DividerHorizontal,exports.DividerLine=c.DividerLine,exports.DividerVertical=c.DividerVertical,exports.IconBase=p.IconBase,exports.Icon=a.Icon,exports.
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./utils/style.js"),o=require("./components/container/LayoutBox.js"),r=require("./components/container/layoutBox.types.js"),t=require("./components/container/Flex.js"),n=require("./components/container/Placeholder.js"),s=require("./components/container/CollapsibleContainer.js"),i=require("./components/container/ResizableContainer.js"),l=require("./components/field/Field.js"),c=require("./components/dividers/DividerLine.js"),p=require("./components/icon/IconBase.js"),a=require("./components/icon/Icon.js"),x=require("./components/icon/IconWC.js");exports.calculateColors=e.calculateColors,exports.calculatePercColor=e.calculatePercColor,exports.convertHex=e.convertHex,exports.convertRGB=e.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return e.defaultFontSize}}),exports.pxToRem=e.pxToRem,exports.resolveStyleValue=e.resolveStyleValue,exports.setDefaultFontSize=e.setDefaultFontSize,exports.toHex=e.toHex,exports.LayoutBox=o.LayoutBox,exports.LayoutDirection=r.LayoutDirection,exports.Flex=t.Flex,exports.FlexTight=t.FlexTight,exports.FlexTightStyled=t.FlexTightStyled,exports.FlexWrapper=t.FlexWrapper,exports.Placeholder=n.Placeholder,exports.CollapsibleContainer=s.CollapsibleContainer,exports.ResizableContainer=i.ResizableContainer,exports.Field=l.Field,exports.FieldWrapper=l.FieldWrapper,exports.Select=l.Select,exports.setIconColor=l.setIconColor,exports.setIconComponent=l.setIconComponent,exports.DividerHorizontal=c.DividerHorizontal,exports.DividerLine=c.DividerLine,exports.DividerVertical=c.DividerVertical,exports.IconBase=p.IconBase,exports.Icon=a.Icon,exports.ESIcon=x.ESIcon,exports.ESIconBase=x.ESIconBase;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/utils/esm/index.css
CHANGED
|
@@ -1,27 +1,3 @@
|
|
|
1
|
-
.layoutBox-module_flexible-box__Q8zyl {
|
|
2
|
-
display: flex;
|
|
3
|
-
position: relative;
|
|
4
|
-
flex-direction: row;
|
|
5
|
-
flex: 0;
|
|
6
|
-
flex-grow: 0;
|
|
7
|
-
flex-shrink: 0;
|
|
8
|
-
flex-basis: auto;
|
|
9
|
-
flex-wrap: nowrap;
|
|
10
|
-
gap: 0;
|
|
11
|
-
text-align: left;
|
|
12
|
-
justify-content: flex-start;
|
|
13
|
-
align-items: flex-start;
|
|
14
|
-
align-self: auto;
|
|
15
|
-
margin: 0;
|
|
16
|
-
padding: 0;
|
|
17
|
-
width: auto;
|
|
18
|
-
height: auto;
|
|
19
|
-
max-width: none;
|
|
20
|
-
max-height: none;
|
|
21
|
-
min-width: 0;
|
|
22
|
-
min-height: 0;
|
|
23
|
-
border-radius: initial;
|
|
24
|
-
}
|
|
25
1
|
.icon-module_icon-base-parent__nOMvW {
|
|
26
2
|
line-height: 1px !important;
|
|
27
3
|
}
|
|
@@ -52,24 +28,29 @@
|
|
|
52
28
|
width: var(--height);
|
|
53
29
|
height: var(--width);
|
|
54
30
|
}
|
|
55
|
-
.
|
|
31
|
+
.layoutBox-module_layout-box__faPND {
|
|
32
|
+
display: flex;
|
|
56
33
|
position: relative;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
height:
|
|
72
|
-
|
|
34
|
+
flex-direction: row;
|
|
35
|
+
flex: 0;
|
|
36
|
+
flex-grow: 0;
|
|
37
|
+
flex-shrink: 0;
|
|
38
|
+
flex-basis: auto;
|
|
39
|
+
flex-wrap: nowrap;
|
|
40
|
+
gap: 0;
|
|
41
|
+
text-align: left;
|
|
42
|
+
justify-content: flex-start;
|
|
43
|
+
align-items: flex-start;
|
|
44
|
+
align-self: auto;
|
|
45
|
+
margin: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
width: auto;
|
|
48
|
+
height: auto;
|
|
49
|
+
max-width: none;
|
|
50
|
+
max-height: none;
|
|
51
|
+
min-width: 0;
|
|
52
|
+
min-height: 0;
|
|
53
|
+
border-radius: initial;
|
|
73
54
|
}
|
|
74
55
|
.CollapsibleContainer-module_collapsible-container__u0Jmm {
|
|
75
56
|
transform-origin: 0% 0%;
|
|
@@ -103,4 +84,23 @@
|
|
|
103
84
|
width: var(--prop-value);
|
|
104
85
|
max-width: var(--prop-value);
|
|
105
86
|
opacity: 1;
|
|
87
|
+
}
|
|
88
|
+
.divider-module_divider-line__6CesR {
|
|
89
|
+
position: relative;
|
|
90
|
+
display: block;
|
|
91
|
+
transition: opacity, width, height 250ms ease-in-out;
|
|
92
|
+
background-color: var(--color);
|
|
93
|
+
opacity: var(--opacity);
|
|
94
|
+
}
|
|
95
|
+
.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
|
|
96
|
+
height: var(--length);
|
|
97
|
+
left: var(--left);
|
|
98
|
+
width: var(--width);
|
|
99
|
+
margin: var(--margin);
|
|
100
|
+
}
|
|
101
|
+
.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
|
|
102
|
+
width: var(--length);
|
|
103
|
+
left: var(--left);
|
|
104
|
+
height: var(--height);
|
|
105
|
+
margin: var(--margin);
|
|
106
106
|
}
|
package/dist/utils/index.css
CHANGED
|
@@ -1,27 +1,3 @@
|
|
|
1
|
-
.layoutBox-module_flexible-box__Q8zyl {
|
|
2
|
-
display: flex;
|
|
3
|
-
position: relative;
|
|
4
|
-
flex-direction: row;
|
|
5
|
-
flex: 0;
|
|
6
|
-
flex-grow: 0;
|
|
7
|
-
flex-shrink: 0;
|
|
8
|
-
flex-basis: auto;
|
|
9
|
-
flex-wrap: nowrap;
|
|
10
|
-
gap: 0;
|
|
11
|
-
text-align: left;
|
|
12
|
-
justify-content: flex-start;
|
|
13
|
-
align-items: flex-start;
|
|
14
|
-
align-self: auto;
|
|
15
|
-
margin: 0;
|
|
16
|
-
padding: 0;
|
|
17
|
-
width: auto;
|
|
18
|
-
height: auto;
|
|
19
|
-
max-width: none;
|
|
20
|
-
max-height: none;
|
|
21
|
-
min-width: 0;
|
|
22
|
-
min-height: 0;
|
|
23
|
-
border-radius: initial;
|
|
24
|
-
}
|
|
25
1
|
.icon-module_icon-base-parent__nOMvW {
|
|
26
2
|
line-height: 1px !important;
|
|
27
3
|
}
|
|
@@ -52,24 +28,29 @@
|
|
|
52
28
|
width: var(--height);
|
|
53
29
|
height: var(--width);
|
|
54
30
|
}
|
|
55
|
-
.
|
|
31
|
+
.layoutBox-module_layout-box__faPND {
|
|
32
|
+
display: flex;
|
|
56
33
|
position: relative;
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
height:
|
|
72
|
-
|
|
34
|
+
flex-direction: row;
|
|
35
|
+
flex: 0;
|
|
36
|
+
flex-grow: 0;
|
|
37
|
+
flex-shrink: 0;
|
|
38
|
+
flex-basis: auto;
|
|
39
|
+
flex-wrap: nowrap;
|
|
40
|
+
gap: 0;
|
|
41
|
+
text-align: left;
|
|
42
|
+
justify-content: flex-start;
|
|
43
|
+
align-items: flex-start;
|
|
44
|
+
align-self: auto;
|
|
45
|
+
margin: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
width: auto;
|
|
48
|
+
height: auto;
|
|
49
|
+
max-width: none;
|
|
50
|
+
max-height: none;
|
|
51
|
+
min-width: 0;
|
|
52
|
+
min-height: 0;
|
|
53
|
+
border-radius: initial;
|
|
73
54
|
}
|
|
74
55
|
.CollapsibleContainer-module_collapsible-container__u0Jmm {
|
|
75
56
|
transform-origin: 0% 0%;
|
|
@@ -103,4 +84,23 @@
|
|
|
103
84
|
width: var(--prop-value);
|
|
104
85
|
max-width: var(--prop-value);
|
|
105
86
|
opacity: 1;
|
|
87
|
+
}
|
|
88
|
+
.divider-module_divider-line__6CesR {
|
|
89
|
+
position: relative;
|
|
90
|
+
display: block;
|
|
91
|
+
transition: opacity, width, height 250ms ease-in-out;
|
|
92
|
+
background-color: var(--color);
|
|
93
|
+
opacity: var(--opacity);
|
|
94
|
+
}
|
|
95
|
+
.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
|
|
96
|
+
height: var(--length);
|
|
97
|
+
left: var(--left);
|
|
98
|
+
width: var(--width);
|
|
99
|
+
margin: var(--margin);
|
|
100
|
+
}
|
|
101
|
+
.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
|
|
102
|
+
width: var(--length);
|
|
103
|
+
left: var(--left);
|
|
104
|
+
height: var(--height);
|
|
105
|
+
margin: var(--margin);
|
|
106
106
|
}
|