@dooboostore/simple-web-component 1.0.22 → 1.0.24
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/README.md +568 -32
- package/dist/cjs/decorators/applyNode.js +195 -26
- package/dist/cjs/decorators/applyNode.js.map +2 -2
- package/dist/cjs/decorators/attribute.js +21 -3
- package/dist/cjs/decorators/attribute.js.map +2 -2
- package/dist/cjs/decorators/changedAttributeHost.js.map +2 -2
- package/dist/cjs/decorators/classList.js +82 -19
- package/dist/cjs/decorators/classList.js.map +2 -2
- package/dist/cjs/decorators/elementDefine.js +1 -2
- package/dist/cjs/decorators/elementDefine.js.map +2 -2
- package/dist/cjs/decorators/index.js +0 -1
- package/dist/cjs/decorators/index.js.map +2 -2
- package/dist/cjs/decorators/lifecycles.js +25 -0
- package/dist/cjs/decorators/lifecycles.js.map +2 -2
- package/dist/cjs/decorators/query.js +77 -2
- package/dist/cjs/decorators/query.js.map +2 -2
- package/dist/cjs/decorators/queryAll.js +77 -2
- package/dist/cjs/decorators/queryAll.js.map +2 -2
- package/dist/cjs/decorators/setAttribute.js +4 -4
- package/dist/cjs/decorators/setAttribute.js.map +2 -2
- package/dist/cjs/decorators/style.js +70 -13
- package/dist/cjs/decorators/style.js.map +2 -2
- package/dist/cjs/index.js +4 -4
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/utils/Utils.js +140 -1
- package/dist/cjs/utils/Utils.js.map +2 -2
- package/dist/esm/decorators/applyNode.js +195 -26
- package/dist/esm/decorators/applyNode.js.map +2 -2
- package/dist/esm/decorators/attribute.js +21 -3
- package/dist/esm/decorators/attribute.js.map +2 -2
- package/dist/esm/decorators/changedAttributeHost.js.map +2 -2
- package/dist/esm/decorators/classList.js +82 -19
- package/dist/esm/decorators/classList.js.map +2 -2
- package/dist/esm/decorators/elementDefine.js +1 -2
- package/dist/esm/decorators/elementDefine.js.map +2 -2
- package/dist/esm/decorators/index.js +0 -1
- package/dist/esm/decorators/index.js.map +2 -2
- package/dist/esm/decorators/lifecycles.js +25 -0
- package/dist/esm/decorators/lifecycles.js.map +2 -2
- package/dist/esm/decorators/query.js +77 -2
- package/dist/esm/decorators/query.js.map +2 -2
- package/dist/esm/decorators/queryAll.js +77 -2
- package/dist/esm/decorators/queryAll.js.map +2 -2
- package/dist/esm/decorators/setAttribute.js +4 -4
- package/dist/esm/decorators/setAttribute.js.map +2 -2
- package/dist/esm/decorators/style.js +70 -13
- package/dist/esm/decorators/style.js.map +2 -2
- package/dist/esm/index.js +4 -4
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/utils/Utils.js +140 -1
- package/dist/esm/utils/Utils.js.map +2 -2
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +678 -168
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/decorators/applyNode.d.ts +107 -2
- package/dist/types/decorators/applyNode.d.ts.map +1 -1
- package/dist/types/decorators/attribute.d.ts +11 -4
- package/dist/types/decorators/attribute.d.ts.map +1 -1
- package/dist/types/decorators/classList.d.ts +22 -10
- package/dist/types/decorators/classList.d.ts.map +1 -1
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/index.d.ts +0 -1
- package/dist/types/decorators/index.d.ts.map +1 -1
- package/dist/types/decorators/lifecycles.d.ts +14 -0
- package/dist/types/decorators/lifecycles.d.ts.map +1 -1
- package/dist/types/decorators/query.d.ts +68 -7
- package/dist/types/decorators/query.d.ts.map +1 -1
- package/dist/types/decorators/queryAll.d.ts +70 -1
- package/dist/types/decorators/queryAll.d.ts.map +1 -1
- package/dist/types/decorators/setAttribute.d.ts.map +1 -1
- package/dist/types/decorators/style.d.ts +37 -3
- package/dist/types/decorators/style.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -2
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/utils/Utils.d.ts +49 -0
- package/dist/types/utils/Utils.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +678 -168
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +2 -2
- package/src/decorators/applyNode.ts +319 -37
- package/src/decorators/attribute.ts +44 -11
- package/src/decorators/changedAttributeHost.ts +1 -1
- package/src/decorators/classList.ts +107 -22
- package/src/decorators/elementDefine.ts +1 -2
- package/src/decorators/index.ts +0 -1
- package/src/decorators/lifecycles.ts +40 -0
- package/src/decorators/query.ts +147 -7
- package/src/decorators/queryAll.ts +148 -2
- package/src/decorators/setAttribute.ts +6 -5
- package/src/decorators/style.ts +109 -13
- package/src/index.ts +6 -6
- package/src/utils/Utils.ts +144 -0
- package/dist/cjs/decorators/onConnectedInnerHtml.js +0 -48
- package/dist/cjs/decorators/onConnectedInnerHtml.js.map +0 -7
- package/dist/cjs/utils/TemplateUtils.js +0 -103
- package/dist/cjs/utils/TemplateUtils.js.map +0 -7
- package/dist/esm/decorators/onConnectedInnerHtml.js +0 -29
- package/dist/esm/decorators/onConnectedInnerHtml.js.map +0 -7
- package/dist/esm/utils/TemplateUtils.js +0 -84
- package/dist/esm/utils/TemplateUtils.js.map +0 -7
- package/dist/types/decorators/onConnectedInnerHtml.d.ts +0 -15
- package/dist/types/decorators/onConnectedInnerHtml.d.ts.map +0 -1
- package/dist/types/utils/TemplateUtils.d.ts +0 -54
- package/dist/types/utils/TemplateUtils.d.ts.map +0 -1
- package/src/decorators/onConnectedInnerHtml.ts +0 -42
- package/src/utils/TemplateUtils.ts +0 -83
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
var TemplateUtils;
|
|
2
|
-
((TemplateUtils2) => {
|
|
3
|
-
TemplateUtils2.htmlFragment = (strings, ...values) => {
|
|
4
|
-
const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
|
|
5
|
-
const template = document.createElement("template");
|
|
6
|
-
template.innerHTML = raw.trim();
|
|
7
|
-
return template.content;
|
|
8
|
-
};
|
|
9
|
-
TemplateUtils2.textNode = (strings, ...values) => {
|
|
10
|
-
const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
|
|
11
|
-
return document.createTextNode(raw);
|
|
12
|
-
};
|
|
13
|
-
TemplateUtils2.createElement = (info, attrs = {}) => {
|
|
14
|
-
const el = document.createElement(info.tagName);
|
|
15
|
-
if (info.innerHtml !== void 0) el.innerHTML = info.innerHtml;
|
|
16
|
-
Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
|
|
17
|
-
return el;
|
|
18
|
-
};
|
|
19
|
-
const createTagFunction = (tagName) => {
|
|
20
|
-
return (strings, ...values) => {
|
|
21
|
-
const el = document.createElement(tagName);
|
|
22
|
-
el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== void 0 ? values[i] : ""), "");
|
|
23
|
-
return el;
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
TemplateUtils2.htmlDivElement = createTagFunction("div");
|
|
27
|
-
TemplateUtils2.htmlSpanElement = createTagFunction("span");
|
|
28
|
-
TemplateUtils2.htmlButtonElement = createTagFunction("button");
|
|
29
|
-
TemplateUtils2.htmlUlElement = createTagFunction("ul");
|
|
30
|
-
TemplateUtils2.htmlLiElement = createTagFunction("li");
|
|
31
|
-
TemplateUtils2.htmlInputElement = createTagFunction("input");
|
|
32
|
-
TemplateUtils2.htmlAElement = createTagFunction("a");
|
|
33
|
-
TemplateUtils2.htmlPElement = createTagFunction("p");
|
|
34
|
-
TemplateUtils2.htmlH1Element = createTagFunction("h1");
|
|
35
|
-
TemplateUtils2.htmlH2Element = createTagFunction("h2");
|
|
36
|
-
TemplateUtils2.htmlH3Element = createTagFunction("h3");
|
|
37
|
-
TemplateUtils2.htmlH4Element = createTagFunction("h4");
|
|
38
|
-
TemplateUtils2.htmlH5Element = createTagFunction("h5");
|
|
39
|
-
TemplateUtils2.htmlH6Element = createTagFunction("h6");
|
|
40
|
-
TemplateUtils2.htmlSectionElement = createTagFunction("section");
|
|
41
|
-
TemplateUtils2.htmlArticleElement = createTagFunction("article");
|
|
42
|
-
})(TemplateUtils || (TemplateUtils = {}));
|
|
43
|
-
const htmlFragment = TemplateUtils.htmlFragment;
|
|
44
|
-
const textNode = TemplateUtils.textNode;
|
|
45
|
-
const createElement = TemplateUtils.createElement;
|
|
46
|
-
const htmlDivElement = TemplateUtils.htmlDivElement;
|
|
47
|
-
const htmlSpanElement = TemplateUtils.htmlSpanElement;
|
|
48
|
-
const htmlButtonElement = TemplateUtils.htmlButtonElement;
|
|
49
|
-
const htmlUlElement = TemplateUtils.htmlUlElement;
|
|
50
|
-
const htmlLiElement = TemplateUtils.htmlLiElement;
|
|
51
|
-
const htmlInputElement = TemplateUtils.htmlInputElement;
|
|
52
|
-
const htmlAElement = TemplateUtils.htmlAElement;
|
|
53
|
-
const htmlPElement = TemplateUtils.htmlPElement;
|
|
54
|
-
const htmlH1Element = TemplateUtils.htmlH1Element;
|
|
55
|
-
const htmlH2Element = TemplateUtils.htmlH2Element;
|
|
56
|
-
const htmlH3Element = TemplateUtils.htmlH3Element;
|
|
57
|
-
const htmlH4Element = TemplateUtils.htmlH4Element;
|
|
58
|
-
const htmlH5Element = TemplateUtils.htmlH5Element;
|
|
59
|
-
const htmlH6Element = TemplateUtils.htmlH6Element;
|
|
60
|
-
const htmlSectionElement = TemplateUtils.htmlSectionElement;
|
|
61
|
-
const htmlArticleElement = TemplateUtils.htmlArticleElement;
|
|
62
|
-
export {
|
|
63
|
-
TemplateUtils,
|
|
64
|
-
createElement,
|
|
65
|
-
htmlAElement,
|
|
66
|
-
htmlArticleElement,
|
|
67
|
-
htmlButtonElement,
|
|
68
|
-
htmlDivElement,
|
|
69
|
-
htmlFragment,
|
|
70
|
-
htmlH1Element,
|
|
71
|
-
htmlH2Element,
|
|
72
|
-
htmlH3Element,
|
|
73
|
-
htmlH4Element,
|
|
74
|
-
htmlH5Element,
|
|
75
|
-
htmlH6Element,
|
|
76
|
-
htmlInputElement,
|
|
77
|
-
htmlLiElement,
|
|
78
|
-
htmlPElement,
|
|
79
|
-
htmlSectionElement,
|
|
80
|
-
htmlSpanElement,
|
|
81
|
-
htmlUlElement,
|
|
82
|
-
textNode
|
|
83
|
-
};
|
|
84
|
-
//# sourceMappingURL=TemplateUtils.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/utils/TemplateUtils.ts"],
|
|
4
|
-
"sourcesContent": ["export interface CreateElementInfo {\n tagName: string;\n innerHtml?: string;\n}\n\nexport namespace TemplateUtils {\n /**\n * Tagged template function to create a DocumentFragment from HTML string.\n */\n export const htmlFragment = (strings: TemplateStringsArray, ...values: any[]): DocumentFragment => {\n const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n const template = document.createElement('template');\n template.innerHTML = raw.trim();\n return template.content;\n };\n\n /**\n * Tagged template function to create a Text node from string.\n */\n export const textNode = (strings: TemplateStringsArray, ...values: any[]): Text => {\n const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n return document.createTextNode(raw);\n };\n\n /**\n * Generic element creator using a configuration object and attribute map.\n */\n export const createElement = <T extends HTMLElement>(info: CreateElementInfo, attrs: Record<string, any> = {}): T => {\n const el = document.createElement(info.tagName) as T;\n if (info.innerHtml !== undefined) el.innerHTML = info.innerHtml;\n Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));\n return el;\n };\n\n /**\n * Internal factory to create tagged template functions for specific HTML elements.\n */\n const createTagFunction = <T extends HTMLElement>(tagName: string) => {\n return (strings: TemplateStringsArray, ...values: any[]): T => {\n const el = document.createElement(tagName) as T;\n el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');\n return el;\n };\n };\n\n // Specific Element Factories\n export const htmlDivElement = createTagFunction<HTMLDivElement>('div');\n export const htmlSpanElement = createTagFunction<HTMLSpanElement>('span');\n export const htmlButtonElement = createTagFunction<HTMLButtonElement>('button');\n export const htmlUlElement = createTagFunction<HTMLUListElement>('ul');\n export const htmlLiElement = createTagFunction<HTMLLIElement>('li');\n export const htmlInputElement = createTagFunction<HTMLInputElement>('input');\n export const htmlAElement = createTagFunction<HTMLAnchorElement>('a');\n export const htmlPElement = createTagFunction<HTMLParagraphElement>('p');\n export const htmlH1Element = createTagFunction<HTMLHeadingElement>('h1');\n export const htmlH2Element = createTagFunction<HTMLHeadingElement>('h2');\n export const htmlH3Element = createTagFunction<HTMLHeadingElement>('h3');\n export const htmlH4Element = createTagFunction<HTMLHeadingElement>('h4');\n export const htmlH5Element = createTagFunction<HTMLHeadingElement>('h5');\n export const htmlH6Element = createTagFunction<HTMLHeadingElement>('h6');\n export const htmlSectionElement = createTagFunction<HTMLElement>('section');\n export const htmlArticleElement = createTagFunction<HTMLElement>('article');\n}\n\nexport const htmlFragment = TemplateUtils.htmlFragment;\nexport const textNode = TemplateUtils.textNode;\nexport const createElement = TemplateUtils.createElement;\nexport const htmlDivElement = TemplateUtils.htmlDivElement;\nexport const htmlSpanElement = TemplateUtils.htmlSpanElement;\nexport const htmlButtonElement = TemplateUtils.htmlButtonElement;\nexport const htmlUlElement = TemplateUtils.htmlUlElement;\nexport const htmlLiElement = TemplateUtils.htmlLiElement;\nexport const htmlInputElement = TemplateUtils.htmlInputElement;\nexport const htmlAElement = TemplateUtils.htmlAElement;\nexport const htmlPElement = TemplateUtils.htmlPElement;\nexport const htmlH1Element = TemplateUtils.htmlH1Element;\nexport const htmlH2Element = TemplateUtils.htmlH2Element;\nexport const htmlH3Element = TemplateUtils.htmlH3Element;\nexport const htmlH4Element = TemplateUtils.htmlH4Element;\nexport const htmlH5Element = TemplateUtils.htmlH5Element;\nexport const htmlH6Element = TemplateUtils.htmlH6Element;\nexport const htmlSectionElement = TemplateUtils.htmlSectionElement;\nexport const htmlArticleElement = TemplateUtils.htmlArticleElement;\n"],
|
|
5
|
-
"mappings": "AAKO,IAAU;AAAA,CAAV,CAAUA,mBAAV;AAIE,EAAMA,eAAA,eAAe,CAAC,YAAkC,WAAoC;AACjG,UAAM,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAM,MAAM,OAAO,OAAO,CAAC,MAAM,SAAY,OAAO,CAAC,IAAI,KAAK,EAAE;AACtG,UAAM,WAAW,SAAS,cAAc,UAAU;AAClD,aAAS,YAAY,IAAI,KAAK;AAC9B,WAAO,SAAS;AAAA,EAClB;AAKO,EAAMA,eAAA,WAAW,CAAC,YAAkC,WAAwB;AACjF,UAAM,MAAM,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAM,MAAM,OAAO,OAAO,CAAC,MAAM,SAAY,OAAO,CAAC,IAAI,KAAK,EAAE;AACtG,WAAO,SAAS,eAAe,GAAG;AAAA,EACpC;AAKO,EAAMA,eAAA,gBAAgB,CAAwB,MAAyB,QAA6B,CAAC,MAAS;AACnH,UAAM,KAAK,SAAS,cAAc,KAAK,OAAO;AAC9C,QAAI,KAAK,cAAc,OAAW,IAAG,YAAY,KAAK;AACtD,WAAO,QAAQ,KAAK,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC;AACvE,WAAO;AAAA,EACT;AAKA,QAAM,oBAAoB,CAAwB,YAAoB;AACpE,WAAO,CAAC,YAAkC,WAAqB;AAC7D,YAAM,KAAK,SAAS,cAAc,OAAO;AACzC,SAAG,YAAY,QAAQ,OAAO,CAAC,KAAK,KAAK,MAAM,MAAM,OAAO,OAAO,CAAC,MAAM,SAAY,OAAO,CAAC,IAAI,KAAK,EAAE;AACzG,aAAO;AAAA,IACT;AAAA,EACF;AAGO,EAAMA,eAAA,iBAAiB,kBAAkC,KAAK;AAC9D,EAAMA,eAAA,kBAAkB,kBAAmC,MAAM;AACjE,EAAMA,eAAA,oBAAoB,kBAAqC,QAAQ;AACvE,EAAMA,eAAA,gBAAgB,kBAAoC,IAAI;AAC9D,EAAMA,eAAA,gBAAgB,kBAAiC,IAAI;AAC3D,EAAMA,eAAA,mBAAmB,kBAAoC,OAAO;AACpE,EAAMA,eAAA,eAAe,kBAAqC,GAAG;AAC7D,EAAMA,eAAA,eAAe,kBAAwC,GAAG;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,gBAAgB,kBAAsC,IAAI;AAChE,EAAMA,eAAA,qBAAqB,kBAA+B,SAAS;AACnE,EAAMA,eAAA,qBAAqB,kBAA+B,SAAS;AAAA,GAxD3D;AA2DV,MAAM,eAAe,cAAc;AACnC,MAAM,WAAW,cAAc;AAC/B,MAAM,gBAAgB,cAAc;AACpC,MAAM,iBAAiB,cAAc;AACrC,MAAM,kBAAkB,cAAc;AACtC,MAAM,oBAAoB,cAAc;AACxC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,mBAAmB,cAAc;AACvC,MAAM,eAAe,cAAc;AACnC,MAAM,eAAe,cAAc;AACnC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,gBAAgB,cAAc;AACpC,MAAM,qBAAqB,cAAc;AACzC,MAAM,qBAAqB,cAAc;",
|
|
6
|
-
"names": ["TemplateUtils"]
|
|
7
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
export interface InnerHtmlOptions {
|
|
2
|
-
useShadow?: boolean;
|
|
3
|
-
}
|
|
4
|
-
export interface InnerHtmlMetadata {
|
|
5
|
-
propertyKey: string | symbol;
|
|
6
|
-
options: InnerHtmlOptions;
|
|
7
|
-
}
|
|
8
|
-
export declare const INNER_HTML_METADATA_KEY: unique symbol;
|
|
9
|
-
/**
|
|
10
|
-
* @onConnectedInnerHtml decorator to define the initial HTML content when connected.
|
|
11
|
-
*/
|
|
12
|
-
export declare function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
|
|
13
|
-
export declare function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
|
|
14
|
-
export declare const getOnConnectedInnerHtmlMetadata: (target: any) => InnerHtmlMetadata[] | undefined;
|
|
15
|
-
//# sourceMappingURL=onConnectedInnerHtml.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"onConnectedInnerHtml.d.ts","sourceRoot":"","sources":["../../../src/decorators/onConnectedInnerHtml.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,OAAO,EAAE,gBAAgB,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,eAA4C,CAAC;AAEjF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,GAAG,eAAe,CAAC;AACjF,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,UAAU,EAAE,kBAAkB,GAAG,IAAI,CAAC;AAqBzH,eAAO,MAAM,+BAA+B,GAAI,QAAQ,GAAG,KAAG,iBAAiB,EAAE,GAAG,SAGnF,CAAC"}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
export interface CreateElementInfo {
|
|
2
|
-
tagName: string;
|
|
3
|
-
innerHtml?: string;
|
|
4
|
-
}
|
|
5
|
-
export declare namespace TemplateUtils {
|
|
6
|
-
/**
|
|
7
|
-
* Tagged template function to create a DocumentFragment from HTML string.
|
|
8
|
-
*/
|
|
9
|
-
const htmlFragment: (strings: TemplateStringsArray, ...values: any[]) => DocumentFragment;
|
|
10
|
-
/**
|
|
11
|
-
* Tagged template function to create a Text node from string.
|
|
12
|
-
*/
|
|
13
|
-
const textNode: (strings: TemplateStringsArray, ...values: any[]) => Text;
|
|
14
|
-
/**
|
|
15
|
-
* Generic element creator using a configuration object and attribute map.
|
|
16
|
-
*/
|
|
17
|
-
const createElement: <T extends HTMLElement>(info: CreateElementInfo, attrs?: Record<string, any>) => T;
|
|
18
|
-
const htmlDivElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLDivElement;
|
|
19
|
-
const htmlSpanElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLSpanElement;
|
|
20
|
-
const htmlButtonElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLButtonElement;
|
|
21
|
-
const htmlUlElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLUListElement;
|
|
22
|
-
const htmlLiElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLLIElement;
|
|
23
|
-
const htmlInputElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLInputElement;
|
|
24
|
-
const htmlAElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLAnchorElement;
|
|
25
|
-
const htmlPElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLParagraphElement;
|
|
26
|
-
const htmlH1Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
27
|
-
const htmlH2Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
28
|
-
const htmlH3Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
29
|
-
const htmlH4Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
30
|
-
const htmlH5Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
31
|
-
const htmlH6Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
32
|
-
const htmlSectionElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLElement;
|
|
33
|
-
const htmlArticleElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLElement;
|
|
34
|
-
}
|
|
35
|
-
export declare const htmlFragment: (strings: TemplateStringsArray, ...values: any[]) => DocumentFragment;
|
|
36
|
-
export declare const textNode: (strings: TemplateStringsArray, ...values: any[]) => Text;
|
|
37
|
-
export declare const createElement: <T extends HTMLElement>(info: CreateElementInfo, attrs?: Record<string, any>) => T;
|
|
38
|
-
export declare const htmlDivElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLDivElement;
|
|
39
|
-
export declare const htmlSpanElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLSpanElement;
|
|
40
|
-
export declare const htmlButtonElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLButtonElement;
|
|
41
|
-
export declare const htmlUlElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLUListElement;
|
|
42
|
-
export declare const htmlLiElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLLIElement;
|
|
43
|
-
export declare const htmlInputElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLInputElement;
|
|
44
|
-
export declare const htmlAElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLAnchorElement;
|
|
45
|
-
export declare const htmlPElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLParagraphElement;
|
|
46
|
-
export declare const htmlH1Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
47
|
-
export declare const htmlH2Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
48
|
-
export declare const htmlH3Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
49
|
-
export declare const htmlH4Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
50
|
-
export declare const htmlH5Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
51
|
-
export declare const htmlH6Element: (strings: TemplateStringsArray, ...values: any[]) => HTMLHeadingElement;
|
|
52
|
-
export declare const htmlSectionElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLElement;
|
|
53
|
-
export declare const htmlArticleElement: (strings: TemplateStringsArray, ...values: any[]) => HTMLElement;
|
|
54
|
-
//# sourceMappingURL=TemplateUtils.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TemplateUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/TemplateUtils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yBAAiB,aAAa,CAAC;IAC7B;;OAEG;IACI,MAAM,YAAY,GAAI,SAAS,oBAAoB,EAAE,GAAG,QAAQ,GAAG,EAAE,KAAG,gBAK9E,CAAC;IAEF;;OAEG;IACI,MAAM,QAAQ,GAAI,SAAS,oBAAoB,EAAE,GAAG,QAAQ,GAAG,EAAE,KAAG,IAG1E,CAAC;IAEF;;OAEG;IACI,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,EAAE,MAAM,iBAAiB,EAAE,QAAO,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,KAAG,CAK/G,CAAC;IAcK,MAAM,cAAc,YARR,oBAAoB,aAAa,GAAG,EAAE,mBAQa,CAAC;IAChE,MAAM,eAAe,YATT,oBAAoB,aAAa,GAAG,EAAE,oBASgB,CAAC;IACnE,MAAM,iBAAiB,YAVX,oBAAoB,aAAa,GAAG,EAAE,sBAUsB,CAAC;IACzE,MAAM,aAAa,YAXP,oBAAoB,aAAa,GAAG,EAAE,qBAWa,CAAC;IAChE,MAAM,aAAa,YAZP,oBAAoB,aAAa,GAAG,EAAE,kBAYU,CAAC;IAC7D,MAAM,gBAAgB,YAbV,oBAAoB,aAAa,GAAG,EAAE,qBAamB,CAAC;IACtE,MAAM,YAAY,YAdN,oBAAoB,aAAa,GAAG,EAAE,sBAcY,CAAC;IAC/D,MAAM,YAAY,YAfN,oBAAoB,aAAa,GAAG,EAAE,yBAee,CAAC;IAClE,MAAM,aAAa,YAhBP,oBAAoB,aAAa,GAAG,EAAE,uBAgBe,CAAC;IAClE,MAAM,aAAa,YAjBP,oBAAoB,aAAa,GAAG,EAAE,uBAiBe,CAAC;IAClE,MAAM,aAAa,YAlBP,oBAAoB,aAAa,GAAG,EAAE,uBAkBe,CAAC;IAClE,MAAM,aAAa,YAnBP,oBAAoB,aAAa,GAAG,EAAE,uBAmBe,CAAC;IAClE,MAAM,aAAa,YApBP,oBAAoB,aAAa,GAAG,EAAE,uBAoBe,CAAC;IAClE,MAAM,aAAa,YArBP,oBAAoB,aAAa,GAAG,EAAE,uBAqBe,CAAC;IAClE,MAAM,kBAAkB,YAtBZ,oBAAoB,aAAa,GAAG,EAAE,gBAsBkB,CAAC;IACrE,MAAM,kBAAkB,YAvBZ,oBAAoB,aAAa,GAAG,EAAE,gBAuBkB,CAAC;CAC7E;AAED,eAAO,MAAM,YAAY,YAvDe,oBAAoB,aAAa,GAAG,EAAE,KAAG,gBAuD3B,CAAC;AACvD,eAAO,MAAM,QAAQ,YA9Ce,oBAAoB,aAAa,GAAG,EAAE,KAAG,IA8C/B,CAAC;AAC/C,eAAO,MAAM,aAAa,GAvCM,CAAC,SAAS,WAAW,QAAQ,iBAAiB,UAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAQ,CAuC1D,CAAC;AACzD,eAAO,MAAM,cAAc,YA7BN,oBAAoB,aAAa,GAAG,EAAE,mBA6BD,CAAC;AAC3D,eAAO,MAAM,eAAe,YA9BP,oBAAoB,aAAa,GAAG,EAAE,oBA8BC,CAAC;AAC7D,eAAO,MAAM,iBAAiB,YA/BT,oBAAoB,aAAa,GAAG,EAAE,sBA+BK,CAAC;AACjE,eAAO,MAAM,aAAa,YAhCL,oBAAoB,aAAa,GAAG,EAAE,qBAgCH,CAAC;AACzD,eAAO,MAAM,aAAa,YAjCL,oBAAoB,aAAa,GAAG,EAAE,kBAiCH,CAAC;AACzD,eAAO,MAAM,gBAAgB,YAlCR,oBAAoB,aAAa,GAAG,EAAE,qBAkCG,CAAC;AAC/D,eAAO,MAAM,YAAY,YAnCJ,oBAAoB,aAAa,GAAG,EAAE,sBAmCL,CAAC;AACvD,eAAO,MAAM,YAAY,YApCJ,oBAAoB,aAAa,GAAG,EAAE,yBAoCL,CAAC;AACvD,eAAO,MAAM,aAAa,YArCL,oBAAoB,aAAa,GAAG,EAAE,uBAqCH,CAAC;AACzD,eAAO,MAAM,aAAa,YAtCL,oBAAoB,aAAa,GAAG,EAAE,uBAsCH,CAAC;AACzD,eAAO,MAAM,aAAa,YAvCL,oBAAoB,aAAa,GAAG,EAAE,uBAuCH,CAAC;AACzD,eAAO,MAAM,aAAa,YAxCL,oBAAoB,aAAa,GAAG,EAAE,uBAwCH,CAAC;AACzD,eAAO,MAAM,aAAa,YAzCL,oBAAoB,aAAa,GAAG,EAAE,uBAyCH,CAAC;AACzD,eAAO,MAAM,aAAa,YA1CL,oBAAoB,aAAa,GAAG,EAAE,uBA0CH,CAAC;AACzD,eAAO,MAAM,kBAAkB,YA3CV,oBAAoB,aAAa,GAAG,EAAE,gBA2CO,CAAC;AACnE,eAAO,MAAM,kBAAkB,YA5CV,oBAAoB,aAAa,GAAG,EAAE,gBA4CO,CAAC"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { ReflectUtils } from '@dooboostore/core';
|
|
2
|
-
|
|
3
|
-
export interface InnerHtmlOptions {
|
|
4
|
-
useShadow?: boolean;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export interface InnerHtmlMetadata {
|
|
8
|
-
propertyKey: string | symbol;
|
|
9
|
-
options: InnerHtmlOptions;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export const INNER_HTML_METADATA_KEY = Symbol('simple-web-component:inner-html');
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* @onConnectedInnerHtml decorator to define the initial HTML content when connected.
|
|
16
|
-
*/
|
|
17
|
-
export function onConnectedInnerHtml(options: InnerHtmlOptions): MethodDecorator;
|
|
18
|
-
export function onConnectedInnerHtml(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
|
|
19
|
-
export function onConnectedInnerHtml(arg1?: InnerHtmlOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
|
|
20
|
-
const decorator = (options: InnerHtmlOptions, target: Object, propertyKey: string | symbol) => {
|
|
21
|
-
const constructor = target.constructor;
|
|
22
|
-
let list = ReflectUtils.getMetadata<InnerHtmlMetadata[]>(INNER_HTML_METADATA_KEY, constructor);
|
|
23
|
-
if (!list) {
|
|
24
|
-
list = [];
|
|
25
|
-
ReflectUtils.defineMetadata(INNER_HTML_METADATA_KEY, list, constructor);
|
|
26
|
-
}
|
|
27
|
-
list.push({ propertyKey, options });
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
if (arg2) {
|
|
31
|
-
return decorator({}, arg1!, arg2);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return (target: Object, propertyKey: string | symbol) => {
|
|
35
|
-
decorator((arg1 as InnerHtmlOptions) || {}, target, propertyKey);
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export const getOnConnectedInnerHtmlMetadata = (target: any): InnerHtmlMetadata[] | undefined => {
|
|
40
|
-
const constructor = target instanceof Function ? target : target.constructor;
|
|
41
|
-
return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
|
|
42
|
-
};
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
export interface CreateElementInfo {
|
|
2
|
-
tagName: string;
|
|
3
|
-
innerHtml?: string;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
export namespace TemplateUtils {
|
|
7
|
-
/**
|
|
8
|
-
* Tagged template function to create a DocumentFragment from HTML string.
|
|
9
|
-
*/
|
|
10
|
-
export const htmlFragment = (strings: TemplateStringsArray, ...values: any[]): DocumentFragment => {
|
|
11
|
-
const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');
|
|
12
|
-
const template = document.createElement('template');
|
|
13
|
-
template.innerHTML = raw.trim();
|
|
14
|
-
return template.content;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Tagged template function to create a Text node from string.
|
|
19
|
-
*/
|
|
20
|
-
export const textNode = (strings: TemplateStringsArray, ...values: any[]): Text => {
|
|
21
|
-
const raw = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');
|
|
22
|
-
return document.createTextNode(raw);
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* Generic element creator using a configuration object and attribute map.
|
|
27
|
-
*/
|
|
28
|
-
export const createElement = <T extends HTMLElement>(info: CreateElementInfo, attrs: Record<string, any> = {}): T => {
|
|
29
|
-
const el = document.createElement(info.tagName) as T;
|
|
30
|
-
if (info.innerHtml !== undefined) el.innerHTML = info.innerHtml;
|
|
31
|
-
Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
|
|
32
|
-
return el;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Internal factory to create tagged template functions for specific HTML elements.
|
|
37
|
-
*/
|
|
38
|
-
const createTagFunction = <T extends HTMLElement>(tagName: string) => {
|
|
39
|
-
return (strings: TemplateStringsArray, ...values: any[]): T => {
|
|
40
|
-
const el = document.createElement(tagName) as T;
|
|
41
|
-
el.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] !== undefined ? values[i] : ''), '');
|
|
42
|
-
return el;
|
|
43
|
-
};
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
// Specific Element Factories
|
|
47
|
-
export const htmlDivElement = createTagFunction<HTMLDivElement>('div');
|
|
48
|
-
export const htmlSpanElement = createTagFunction<HTMLSpanElement>('span');
|
|
49
|
-
export const htmlButtonElement = createTagFunction<HTMLButtonElement>('button');
|
|
50
|
-
export const htmlUlElement = createTagFunction<HTMLUListElement>('ul');
|
|
51
|
-
export const htmlLiElement = createTagFunction<HTMLLIElement>('li');
|
|
52
|
-
export const htmlInputElement = createTagFunction<HTMLInputElement>('input');
|
|
53
|
-
export const htmlAElement = createTagFunction<HTMLAnchorElement>('a');
|
|
54
|
-
export const htmlPElement = createTagFunction<HTMLParagraphElement>('p');
|
|
55
|
-
export const htmlH1Element = createTagFunction<HTMLHeadingElement>('h1');
|
|
56
|
-
export const htmlH2Element = createTagFunction<HTMLHeadingElement>('h2');
|
|
57
|
-
export const htmlH3Element = createTagFunction<HTMLHeadingElement>('h3');
|
|
58
|
-
export const htmlH4Element = createTagFunction<HTMLHeadingElement>('h4');
|
|
59
|
-
export const htmlH5Element = createTagFunction<HTMLHeadingElement>('h5');
|
|
60
|
-
export const htmlH6Element = createTagFunction<HTMLHeadingElement>('h6');
|
|
61
|
-
export const htmlSectionElement = createTagFunction<HTMLElement>('section');
|
|
62
|
-
export const htmlArticleElement = createTagFunction<HTMLElement>('article');
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export const htmlFragment = TemplateUtils.htmlFragment;
|
|
66
|
-
export const textNode = TemplateUtils.textNode;
|
|
67
|
-
export const createElement = TemplateUtils.createElement;
|
|
68
|
-
export const htmlDivElement = TemplateUtils.htmlDivElement;
|
|
69
|
-
export const htmlSpanElement = TemplateUtils.htmlSpanElement;
|
|
70
|
-
export const htmlButtonElement = TemplateUtils.htmlButtonElement;
|
|
71
|
-
export const htmlUlElement = TemplateUtils.htmlUlElement;
|
|
72
|
-
export const htmlLiElement = TemplateUtils.htmlLiElement;
|
|
73
|
-
export const htmlInputElement = TemplateUtils.htmlInputElement;
|
|
74
|
-
export const htmlAElement = TemplateUtils.htmlAElement;
|
|
75
|
-
export const htmlPElement = TemplateUtils.htmlPElement;
|
|
76
|
-
export const htmlH1Element = TemplateUtils.htmlH1Element;
|
|
77
|
-
export const htmlH2Element = TemplateUtils.htmlH2Element;
|
|
78
|
-
export const htmlH3Element = TemplateUtils.htmlH3Element;
|
|
79
|
-
export const htmlH4Element = TemplateUtils.htmlH4Element;
|
|
80
|
-
export const htmlH5Element = TemplateUtils.htmlH5Element;
|
|
81
|
-
export const htmlH6Element = TemplateUtils.htmlH6Element;
|
|
82
|
-
export const htmlSectionElement = TemplateUtils.htmlSectionElement;
|
|
83
|
-
export const htmlArticleElement = TemplateUtils.htmlArticleElement;
|