@3t-transform/threeteeui 0.0.7 → 0.0.8
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/cjs/{index-253ca97c.js → index-8a4cb9bc.js} +26 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/tttx-button.cjs.entry.js +1 -1
- package/dist/cjs/tttx-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/tttx-form.cjs.entry.js +1 -1
- package/dist/cjs/tttx-icon.cjs.entry.js +1861 -0
- package/dist/cjs/tttx-input.cjs.entry.js +44 -0
- package/dist/cjs/tttx-loading-spinner.cjs.entry.js +26 -0
- package/dist/cjs/tttx-popover-content.cjs.entry.js +23 -0
- package/dist/cjs/tttx.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +5 -3
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +1 -4
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.css +101 -0
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.js +114 -0
- package/dist/collection/components/atoms/tttx-icon/tttx-icon.stories.js +47 -0
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.css +48 -0
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.js +66 -0
- package/dist/collection/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.js +15 -0
- package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.css +30 -0
- package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.js +96 -0
- package/dist/collection/components/atoms/tttx-popover-content/tttx-popover-content.stories.js +23 -0
- package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.css +1 -4
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +18 -22
- package/dist/collection/components/{atoms/tttx-text-box/tttx-text-box.css → molecules/tttx-input/tttx-input.css} +11 -4
- package/dist/collection/components/{atoms/tttx-single-input/tttx-single-input.js → molecules/tttx-input/tttx-input.js} +5 -5
- package/dist/collection/components/molecules/tttx-input/tttx-input.stories.js +106 -0
- package/dist/collection/components/palette.stories.js +88 -0
- package/dist/components/index.d.ts +4 -2
- package/dist/components/index.js +4 -2
- package/dist/components/tttx-checkbox.js +1 -1
- package/dist/components/{tttx-text-box.d.ts → tttx-icon.d.ts} +4 -4
- package/dist/components/tttx-icon.js +6 -0
- package/dist/components/tttx-icon2.js +1875 -0
- package/dist/components/{tttx-single-input.d.ts → tttx-input.d.ts} +4 -4
- package/dist/components/tttx-input.js +77 -0
- package/dist/components/tttx-loading-spinner.d.ts +11 -0
- package/dist/components/tttx-loading-spinner.js +43 -0
- package/dist/components/tttx-popover-content.d.ts +11 -0
- package/dist/components/tttx-popover-content.js +42 -0
- package/dist/esm/{index-fcca6c58.js → index-9654537d.js} +26 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/tttx-button.entry.js +1 -1
- package/dist/esm/tttx-checkbox.entry.js +2 -2
- package/dist/esm/tttx-form.entry.js +1 -1
- package/dist/esm/tttx-icon.entry.js +1857 -0
- package/dist/esm/tttx-input.entry.js +40 -0
- package/dist/esm/tttx-loading-spinner.entry.js +22 -0
- package/dist/esm/tttx-popover-content.entry.js +19 -0
- package/dist/esm/tttx.js +3 -3
- package/dist/tttx/p-1884203f.entry.js +1 -0
- package/dist/tttx/p-317b13d3.entry.js +1 -0
- package/dist/tttx/{p-8d1f2e5c.entry.js → p-3cb692d6.entry.js} +1 -1
- package/dist/tttx/p-3cd7ad04.entry.js +1 -0
- package/dist/tttx/p-674e2f18.entry.js +1 -0
- package/dist/tttx/p-a23389f1.entry.js +1 -0
- package/dist/tttx/p-b6cc2780.js +2 -0
- package/dist/tttx/{p-40709c59.entry.js → p-f30a0e84.entry.js} +1 -1
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-icon/tttx-icon.d.ts +14 -0
- package/dist/types/components/atoms/tttx-icon/tttx-icon.stories.d.ts +21 -0
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.d.ts +6 -0
- package/dist/types/components/atoms/tttx-loading-spinner/tttx-loading-spinner.stories.d.ts +5 -0
- package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.d.ts +7 -0
- package/dist/types/components/atoms/tttx-popover-content/tttx-popover-content.stories.d.ts +18 -0
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +12 -5
- package/dist/types/components/{atoms/tttx-single-input/tttx-single-input.d.ts → molecules/tttx-input/tttx-input.d.ts} +1 -1
- package/dist/types/components/molecules/tttx-input/tttx-input.stories.d.ts +60 -0
- package/dist/types/components.d.ts +63 -36
- package/package.json +67 -58
- package/readme.md +14 -27
- package/dist/cjs/tttx-single-input.cjs.entry.js +0 -44
- package/dist/cjs/tttx-text-box.cjs.entry.js +0 -38
- package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.css +0 -142
- package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.stories.js +0 -92
- package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.js +0 -150
- package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.stories.js +0 -17
- package/dist/collection/docs/template.stories.js +0 -10
- package/dist/components/tttx-single-input.js +0 -71
- package/dist/components/tttx-text-box.js +0 -59
- package/dist/esm/tttx-single-input.entry.js +0 -40
- package/dist/esm/tttx-text-box.entry.js +0 -34
- package/dist/tttx/p-05d7d002.entry.js +0 -1
- package/dist/tttx/p-64703252.entry.js +0 -1
- package/dist/tttx/p-9bf836ed.entry.js +0 -1
- package/dist/tttx/p-a7b95fd2.js +0 -2
- package/dist/types/components/atoms/tttx-single-input/tttx-single-input.stories.d.ts +0 -27
- package/dist/types/components/atoms/tttx-text-box/tttx-text-box.d.ts +0 -14
- package/dist/types/docs/template.stories.d.ts +0 -5
- /package/dist/types/components/{atoms/tttx-text-box/tttx-text-box.stories.d.ts → palette.stories.d.ts} +0 -0
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-8a4cb9bc.js');
|
|
6
|
+
|
|
7
|
+
const tttxInputCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.material-symbols-rounded{font-family:\"Material Symbols Rounded\", sans-serif;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:#9e9e9e}.field{clear:both}.container{display:flex;flex-wrap:wrap;box-sizing:border-box;height:36px;border:1px solid #c8c8c8;border-radius:4px}.icon-left,.icon-right{flex-basis:24px}.icon-left span,.icon-right span{font-size:24px;line-height:24px;text-align:center;display:block;width:24px;height:24px;margin-top:4px}.icon-left span{margin-left:4px}.icon-right span{margin-right:4px}.input{flex-grow:1;border:none;outline:none;font-size:16px;padding:8px 16px;background-color:transparent}.iconleft .input{padding-left:4px}.iconright .input{padding-right:4px}.label{display:block;height:18px;font-weight:600;color:#212121;font-size:16px;margin-bottom:4px;z-index:1}.disabled{background:#f0f0f0;color:#9e9e9e;border-color:#c8c8c8}.focused{border-color:#1479c6}.errormsg{display:flex;justify-content:center;align-items:center;float:left;margin-bottom:16px;box-sizing:border-box;background-color:transparent;height:26px;font-size:14px;border-radius:none;z-index:2;color:#DC0000}.errormsg .validationicon{width:16px;height:16px;font-size:16px;margin-right:4px;vertical-align:middle;color:#DC0000}.danger{color:#DC0000}.optional{color:#757575;font-weight:normal}:host{display:block}.spacing{margin-bottom:16px}.errorstate{border-color:#DC0000}.icon-right{margin-top:5px;margin-right:4px}.icon-left{margin-top:5px;margin-left:4px}";
|
|
8
|
+
|
|
9
|
+
const TttxInput = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.valueChanged = index.createEvent(this, "valueChanged", 7);
|
|
13
|
+
this.handleFocus = () => {
|
|
14
|
+
this.isfocused = true;
|
|
15
|
+
};
|
|
16
|
+
this.handleBlur = () => {
|
|
17
|
+
this.isfocused = false;
|
|
18
|
+
};
|
|
19
|
+
this.isfocused = false;
|
|
20
|
+
this.label = undefined;
|
|
21
|
+
this.valid = undefined;
|
|
22
|
+
this.showerrormsg = undefined;
|
|
23
|
+
this.errormsg = undefined;
|
|
24
|
+
this.value = undefined;
|
|
25
|
+
this.type = 'text';
|
|
26
|
+
this.placeholder = undefined;
|
|
27
|
+
this.pattern = undefined;
|
|
28
|
+
this.iconleft = undefined;
|
|
29
|
+
this.iconright = undefined;
|
|
30
|
+
this.required = undefined;
|
|
31
|
+
}
|
|
32
|
+
handleChange(event) {
|
|
33
|
+
const target = event.target;
|
|
34
|
+
this.value = target.value;
|
|
35
|
+
this.valueChanged.emit(target.value);
|
|
36
|
+
}
|
|
37
|
+
render() {
|
|
38
|
+
const inputClass = ['container', this.showerrormsg ? 'errorstate' : '', this.isfocused ? 'focused' : '', this.iconleft ? 'iconleft' : ''].join(' ');
|
|
39
|
+
return (index.h(index.Host, null, index.h("div", { class: "field spacing" }, this.label && index.h("label", { class: "label" }, this.label, !this.required ? index.h("span", { class: "optional" }, " (optional)") : ''), index.h("div", { class: inputClass }, this.iconleft && (index.h("div", { class: "icon-left" }, index.h("tttx-icon", { icon: this.iconleft, colour: "grey" }))), index.h("input", { class: "input", onFocus: this.handleFocus.bind(this), onBlur: this.handleBlur.bind(this), type: this.type, placeholder: this.placeholder, value: this.value, onInput: event => this.handleChange(event) }), this.iconright && (index.h("div", { class: "icon-right" }, index.h("tttx-icon", { icon: this.iconright, colour: "grey" })))), this.showerrormsg && this.errormsg && index.h("div", { class: "errormsg" }, index.h("span", { class: "material-symbols-rounded validationicon" }, "warning"), " ", this.errormsg))));
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
TttxInput.style = tttxInputCss;
|
|
43
|
+
|
|
44
|
+
exports.tttx_input = TttxInput;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-8a4cb9bc.js');
|
|
6
|
+
|
|
7
|
+
const tttxLoadingSpinnerCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}.spinner-container{position:absolute}.loading-box{display:flex;align-items:center;justify-content:center}.loading-text{font-size:16px;font-weight:400;padding-top:10px;text-align:center}.spinner{border:solid #1479c6;border-bottom-color:#D5D5D5;border-radius:50%;position:relative;box-sizing:border-box;animation:rotation 1s linear infinite}.spinner.small{height:20px;width:20px;border-width:4px}.spinner.large{height:60px;width:60px;border-width:8px}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
|
|
8
|
+
|
|
9
|
+
const TttxLoadingSpinner = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.loadingMessage = undefined;
|
|
13
|
+
this.size = 'large';
|
|
14
|
+
}
|
|
15
|
+
renderLoadingMessage() {
|
|
16
|
+
if (!this.loadingMessage)
|
|
17
|
+
return '';
|
|
18
|
+
return index.h("div", { class: 'loading-text' }, "Loading, please wait...");
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
return index.h("div", { class: 'spinner-container' }, index.h("div", { class: "loading-box" }, index.h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage());
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
TttxLoadingSpinner.style = tttxLoadingSpinnerCss;
|
|
25
|
+
|
|
26
|
+
exports.tttx_loading_spinner = TttxLoadingSpinner;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-8a4cb9bc.js');
|
|
6
|
+
|
|
7
|
+
const tttxPopoverContentCss = ".material-symbols-rounded{font-variation-settings:\"FILL\" 1, \"wght\" 400, \"GRAD\" 0, \"opsz\" 24}:host{display:block;max-width:400px}h4{margin:0;font-size:15px;font-weight:700;color:black;margin-bottom:4px}p{margin:0;font-size:14px;font-weight:normal;color:black;margin-bottom:4px}.linky{color:#1479c6;text-decoration:none;cursor:pointer}";
|
|
8
|
+
|
|
9
|
+
const TttxPopoverContent = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
index.registerInstance(this, hostRef);
|
|
12
|
+
this.header = undefined;
|
|
13
|
+
this.body = undefined;
|
|
14
|
+
this.linkcontext = undefined;
|
|
15
|
+
this.linktext = undefined;
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
return (index.h(index.Host, null, this.header && index.h("h4", null, this.header), this.body && index.h("p", null, this.body), this.linkcontext && index.h("span", { class: "linky", onClick: (evt) => console.log(this.linkcontext, evt) }, this.linktext || 'More Information')));
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
TttxPopoverContent.style = tttxPopoverContentCss;
|
|
22
|
+
|
|
23
|
+
exports.tttx_popover_content = TttxPopoverContent;
|
package/dist/cjs/tttx.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-8a4cb9bc.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-
|
|
20
|
+
return index.bootstrapLazy([["tttx-input.cjs",[[1,"tttx-input",{"label":[1],"valid":[4],"showerrormsg":[4],"errormsg":[1],"value":[1025],"type":[1],"placeholder":[1],"pattern":[1],"iconleft":[1],"iconright":[1],"required":[4],"isfocused":[32]}]]],["tttx-button.cjs",[[1,"tttx-button",{"fontColor":[1,"font-color"],"buttonStyle":[1,"button-style"]},[[0,"clickEvent","onClicked"]]]]],["tttx-checkbox.cjs",[[1,"tttx-checkbox",{"value":[4],"label":[1],"required":[4]}]]],["tttx-form.cjs",[[1,"tttx-form",{"dataAttribute":[1,"data-attribute"],"functionAttribute":[1,"function-attribute"]}]]],["tttx-loading-spinner.cjs",[[1,"tttx-loading-spinner",{"loadingMessage":[1028,"loading-message"],"size":[1025]}]]],["tttx-popover-content.cjs",[[1,"tttx-popover-content",{"header":[1],"body":[1],"linkcontext":[1],"linktext":[1]}]]],["tttx-icon.cjs",[[1,"tttx-icon",{"icon":[1],"colour":[1]},[[4,"click","handleDocumentClick"]]]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"entries": [
|
|
3
3
|
"./components/atoms/tttx-button/tttx-button.js",
|
|
4
|
-
"./components/atoms/tttx-
|
|
5
|
-
"./components/atoms/tttx-
|
|
4
|
+
"./components/atoms/tttx-icon/tttx-icon.js",
|
|
5
|
+
"./components/atoms/tttx-loading-spinner/tttx-loading-spinner.js",
|
|
6
|
+
"./components/atoms/tttx-popover-content/tttx-popover-content.js",
|
|
6
7
|
"./components/atoms/ttx-checkbox/tttx-checkbox.js",
|
|
7
|
-
"./components/molecules/tttx-form/tttx-form.js"
|
|
8
|
+
"./components/molecules/tttx-form/tttx-form.js",
|
|
9
|
+
"./components/molecules/tttx-input/tttx-input.js"
|
|
8
10
|
],
|
|
9
11
|
"compiler": {
|
|
10
12
|
"name": "@stencil/core",
|
|
@@ -17,10 +17,7 @@ export default {
|
|
|
17
17
|
},
|
|
18
18
|
};
|
|
19
19
|
const Template = ({ content, fontColor, buttonStyle }) => `
|
|
20
|
-
<tttx-button font-color=${fontColor} button-style=${buttonStyle}
|
|
21
|
-
>
|
|
22
|
-
${content}
|
|
23
|
-
</tttx-button>
|
|
20
|
+
<tttx-button font-color=${fontColor} button-style=${buttonStyle}>${content}</tttx-button>
|
|
24
21
|
`;
|
|
25
22
|
export const Default = Template.bind({});
|
|
26
23
|
Default.args = {
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
.material-symbols-rounded {
|
|
2
|
+
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.material-symbols-rounded {
|
|
6
|
+
font-family: "Material Symbols Rounded", sans-serif;
|
|
7
|
+
font-weight: 400;
|
|
8
|
+
font-style: normal;
|
|
9
|
+
font-size: 24px;
|
|
10
|
+
line-height: 1;
|
|
11
|
+
letter-spacing: normal;
|
|
12
|
+
text-transform: none;
|
|
13
|
+
display: inline-block;
|
|
14
|
+
white-space: nowrap;
|
|
15
|
+
word-wrap: normal;
|
|
16
|
+
direction: ltr;
|
|
17
|
+
text-rendering: optimizeLegibility;
|
|
18
|
+
-webkit-font-smoothing: antialiased;
|
|
19
|
+
color: #9e9e9e;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:host {
|
|
23
|
+
display: block;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.tooltip {
|
|
27
|
+
background: #ffffff;
|
|
28
|
+
color: #343434;
|
|
29
|
+
font-weight: bold;
|
|
30
|
+
padding: 8px 16px;
|
|
31
|
+
font-size: 13px;
|
|
32
|
+
border-radius: 4px;
|
|
33
|
+
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
|
|
34
|
+
display: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.tooltip[data-show] {
|
|
38
|
+
display: block;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.arrow,
|
|
42
|
+
.arrow::before {
|
|
43
|
+
position: absolute;
|
|
44
|
+
width: 8px;
|
|
45
|
+
height: 8px;
|
|
46
|
+
background: inherit;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.arrow {
|
|
50
|
+
visibility: hidden;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.arrow::before {
|
|
54
|
+
visibility: visible;
|
|
55
|
+
content: "";
|
|
56
|
+
transform: rotate(45deg);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.tooltip[data-popper-placement^=top] > .arrow {
|
|
60
|
+
bottom: -4px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.tooltip[data-popper-placement^=bottom] > .arrow {
|
|
64
|
+
top: -4px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.tooltip[data-popper-placement^=left] > .arrow {
|
|
68
|
+
right: -4px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.tooltip[data-popper-placement^=right] > .arrow {
|
|
72
|
+
left: -4px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.red {
|
|
76
|
+
color: #DC0000;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.orange {
|
|
80
|
+
color: #F59500;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.blue {
|
|
84
|
+
color: #1479c6;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.green {
|
|
88
|
+
color: #A2BB31;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.gray {
|
|
92
|
+
color: #757575;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.black {
|
|
96
|
+
color: #212121;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.clickable {
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { Host, h } from '@stencil/core';
|
|
2
|
+
import { createPopper } from '@popperjs/core';
|
|
3
|
+
export class TttxIcon {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.icon = undefined;
|
|
6
|
+
this.colour = 'grey';
|
|
7
|
+
}
|
|
8
|
+
handleDocumentClick(event) {
|
|
9
|
+
if (!event.composedPath().includes(this.referenceElement)) {
|
|
10
|
+
if (this.popperElement) {
|
|
11
|
+
this.popperElement.removeAttribute('data-show');
|
|
12
|
+
}
|
|
13
|
+
if (this.popperInstance) {
|
|
14
|
+
this.popperInstance.update();
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
componentWillLoad() {
|
|
19
|
+
this.hasPopoverSlot = !!this.el.querySelector('[slot="popover"]');
|
|
20
|
+
}
|
|
21
|
+
componentDidLoad() {
|
|
22
|
+
this.popperInstance = createPopper(this.referenceElement, this.popperElement, {
|
|
23
|
+
placement: 'top',
|
|
24
|
+
modifiers: [
|
|
25
|
+
{
|
|
26
|
+
name: 'flip',
|
|
27
|
+
options: {
|
|
28
|
+
fallbackPlacements: ['bottom'],
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
name: 'offset',
|
|
33
|
+
options: {
|
|
34
|
+
offset: [0, 12],
|
|
35
|
+
},
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
disconnectedCallback() {
|
|
41
|
+
this.popperInstance.destroy();
|
|
42
|
+
}
|
|
43
|
+
render() {
|
|
44
|
+
return (h(Host, null, h("span", { onClick: () => {
|
|
45
|
+
if (this.popperElement) {
|
|
46
|
+
this.popperElement.setAttribute('data-show', '');
|
|
47
|
+
}
|
|
48
|
+
if (this.popperInstance) {
|
|
49
|
+
this.popperInstance.update();
|
|
50
|
+
}
|
|
51
|
+
}, ref: el => (this.referenceElement = el), class: `material-symbols-rounded ${this.colour ? this.colour : ''} ${this.hasPopoverSlot ? 'clickable' : ''}` }, this.icon), this.hasPopoverSlot && (h("div", { ref: el => (this.popperElement = el), class: "tooltip" }, h("slot", { name: "popover" }), h("div", { class: "arrow", "data-popper-arrow": true })))));
|
|
52
|
+
}
|
|
53
|
+
static get is() { return "tttx-icon"; }
|
|
54
|
+
static get encapsulation() { return "shadow"; }
|
|
55
|
+
static get originalStyleUrls() {
|
|
56
|
+
return {
|
|
57
|
+
"$": ["tttx-icon.scss"]
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
static get styleUrls() {
|
|
61
|
+
return {
|
|
62
|
+
"$": ["tttx-icon.css"]
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
static get properties() {
|
|
66
|
+
return {
|
|
67
|
+
"icon": {
|
|
68
|
+
"type": "string",
|
|
69
|
+
"mutable": false,
|
|
70
|
+
"complexType": {
|
|
71
|
+
"original": "string",
|
|
72
|
+
"resolved": "string",
|
|
73
|
+
"references": {}
|
|
74
|
+
},
|
|
75
|
+
"required": false,
|
|
76
|
+
"optional": false,
|
|
77
|
+
"docs": {
|
|
78
|
+
"tags": [],
|
|
79
|
+
"text": ""
|
|
80
|
+
},
|
|
81
|
+
"attribute": "icon",
|
|
82
|
+
"reflect": false
|
|
83
|
+
},
|
|
84
|
+
"colour": {
|
|
85
|
+
"type": "string",
|
|
86
|
+
"mutable": false,
|
|
87
|
+
"complexType": {
|
|
88
|
+
"original": "string",
|
|
89
|
+
"resolved": "string",
|
|
90
|
+
"references": {}
|
|
91
|
+
},
|
|
92
|
+
"required": false,
|
|
93
|
+
"optional": false,
|
|
94
|
+
"docs": {
|
|
95
|
+
"tags": [],
|
|
96
|
+
"text": ""
|
|
97
|
+
},
|
|
98
|
+
"attribute": "colour",
|
|
99
|
+
"reflect": false,
|
|
100
|
+
"defaultValue": "'grey'"
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
}
|
|
104
|
+
static get elementRef() { return "el"; }
|
|
105
|
+
static get listeners() {
|
|
106
|
+
return [{
|
|
107
|
+
"name": "click",
|
|
108
|
+
"method": "handleDocumentClick",
|
|
109
|
+
"target": "document",
|
|
110
|
+
"capture": false,
|
|
111
|
+
"passive": false
|
|
112
|
+
}];
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import icons from './../../../icons';
|
|
2
|
+
const colours = ['red', 'blue', 'black', 'grey', 'green'];
|
|
3
|
+
export default {
|
|
4
|
+
title: 'Atoms/Icons',
|
|
5
|
+
component: 'tttx-icon',
|
|
6
|
+
argTypes: {
|
|
7
|
+
icon: {
|
|
8
|
+
control: {
|
|
9
|
+
type: 'select',
|
|
10
|
+
options: icons,
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
colour: {
|
|
14
|
+
control: {
|
|
15
|
+
type: 'select',
|
|
16
|
+
options: colours,
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
};
|
|
21
|
+
const Template = ({ icon, colour }) => `<tttx-icon icon="${icon}" colour="${colour}" />`;
|
|
22
|
+
export const Basic = Template.bind({});
|
|
23
|
+
Basic.args = {
|
|
24
|
+
icon: 'warning',
|
|
25
|
+
colour: 'red',
|
|
26
|
+
};
|
|
27
|
+
const WithPopoverTemplate = ({ icon, colour }) => `
|
|
28
|
+
<div style="overflow: auto; height: 300px;">
|
|
29
|
+
<div style="margin-top:150px; height:300px;">
|
|
30
|
+
<tttx-icon icon="${icon}" colour="${colour}">
|
|
31
|
+
<div slot="popover">
|
|
32
|
+
<tttx-popover-content
|
|
33
|
+
header="The humble egg"
|
|
34
|
+
body="Most arthropods such as insects, vertebrates (excluding live-bearing mammals), and mollusks lay eggs, although some, such as scorpions, do not."
|
|
35
|
+
linkcontext="Wikipedia_egg"
|
|
36
|
+
linktext="Learn more about eggs"
|
|
37
|
+
/>
|
|
38
|
+
</div>
|
|
39
|
+
</tttx-icon>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
`;
|
|
43
|
+
export const WithPopover = WithPopoverTemplate.bind({});
|
|
44
|
+
WithPopover.args = {
|
|
45
|
+
icon: 'warning',
|
|
46
|
+
colour: 'red',
|
|
47
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
.material-symbols-rounded {
|
|
2
|
+
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.spinner-container {
|
|
6
|
+
position: absolute;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.loading-box {
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.loading-text {
|
|
16
|
+
font-size: 16px;
|
|
17
|
+
font-weight: 400;
|
|
18
|
+
padding-top: 10px;
|
|
19
|
+
text-align: center;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.spinner {
|
|
23
|
+
border: solid #1479c6;
|
|
24
|
+
border-bottom-color: #D5D5D5;
|
|
25
|
+
border-radius: 50%;
|
|
26
|
+
position: relative;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
animation: rotation 1s linear infinite;
|
|
29
|
+
}
|
|
30
|
+
.spinner.small {
|
|
31
|
+
height: 20px;
|
|
32
|
+
width: 20px;
|
|
33
|
+
border-width: 4px;
|
|
34
|
+
}
|
|
35
|
+
.spinner.large {
|
|
36
|
+
height: 60px;
|
|
37
|
+
width: 60px;
|
|
38
|
+
border-width: 8px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@keyframes rotation {
|
|
42
|
+
0% {
|
|
43
|
+
transform: rotate(0deg);
|
|
44
|
+
}
|
|
45
|
+
100% {
|
|
46
|
+
transform: rotate(360deg);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
export class TttxLoadingSpinner {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.loadingMessage = undefined;
|
|
5
|
+
this.size = 'large';
|
|
6
|
+
}
|
|
7
|
+
renderLoadingMessage() {
|
|
8
|
+
if (!this.loadingMessage)
|
|
9
|
+
return '';
|
|
10
|
+
return h("div", { class: 'loading-text' }, "Loading, please wait...");
|
|
11
|
+
}
|
|
12
|
+
render() {
|
|
13
|
+
return h("div", { class: 'spinner-container' }, h("div", { class: "loading-box" }, h("span", { class: `spinner ${this.size}` })), this.renderLoadingMessage());
|
|
14
|
+
}
|
|
15
|
+
static get is() { return "tttx-loading-spinner"; }
|
|
16
|
+
static get encapsulation() { return "shadow"; }
|
|
17
|
+
static get originalStyleUrls() {
|
|
18
|
+
return {
|
|
19
|
+
"$": ["tttx-loading-spinner.scss"]
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
static get styleUrls() {
|
|
23
|
+
return {
|
|
24
|
+
"$": ["tttx-loading-spinner.css"]
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
static get properties() {
|
|
28
|
+
return {
|
|
29
|
+
"loadingMessage": {
|
|
30
|
+
"type": "boolean",
|
|
31
|
+
"mutable": true,
|
|
32
|
+
"complexType": {
|
|
33
|
+
"original": "boolean",
|
|
34
|
+
"resolved": "boolean",
|
|
35
|
+
"references": {}
|
|
36
|
+
},
|
|
37
|
+
"required": false,
|
|
38
|
+
"optional": false,
|
|
39
|
+
"docs": {
|
|
40
|
+
"tags": [],
|
|
41
|
+
"text": ""
|
|
42
|
+
},
|
|
43
|
+
"attribute": "loading-message",
|
|
44
|
+
"reflect": false
|
|
45
|
+
},
|
|
46
|
+
"size": {
|
|
47
|
+
"type": "string",
|
|
48
|
+
"mutable": true,
|
|
49
|
+
"complexType": {
|
|
50
|
+
"original": "'small' | 'large'",
|
|
51
|
+
"resolved": "\"large\" | \"small\"",
|
|
52
|
+
"references": {}
|
|
53
|
+
},
|
|
54
|
+
"required": false,
|
|
55
|
+
"optional": false,
|
|
56
|
+
"docs": {
|
|
57
|
+
"tags": [],
|
|
58
|
+
"text": ""
|
|
59
|
+
},
|
|
60
|
+
"attribute": "size",
|
|
61
|
+
"reflect": false,
|
|
62
|
+
"defaultValue": "'large'"
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
title: 'atoms/TTTX Loading Spinner',
|
|
3
|
+
component: 'tttx-loading-spinner',
|
|
4
|
+
argTypes: {
|
|
5
|
+
loadingMessage: {
|
|
6
|
+
control: 'boolean',
|
|
7
|
+
},
|
|
8
|
+
size: {
|
|
9
|
+
control: { type: 'inline-radio', options: ['small', 'large'] },
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
export const Example = { render: (args) => {
|
|
14
|
+
return `<tttx-loading-spinner ${args.loadingMessage ? 'loading-message' : ''} size='${args.size}'/>`;
|
|
15
|
+
} };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.material-symbols-rounded {
|
|
2
|
+
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
:host {
|
|
6
|
+
display: block;
|
|
7
|
+
max-width: 400px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
h4 {
|
|
11
|
+
margin: 0;
|
|
12
|
+
font-size: 15px;
|
|
13
|
+
font-weight: 700;
|
|
14
|
+
color: black;
|
|
15
|
+
margin-bottom: 4px;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
p {
|
|
19
|
+
margin: 0;
|
|
20
|
+
font-size: 14px;
|
|
21
|
+
font-weight: normal;
|
|
22
|
+
color: black;
|
|
23
|
+
margin-bottom: 4px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.linky {
|
|
27
|
+
color: #1479c6;
|
|
28
|
+
text-decoration: none;
|
|
29
|
+
cursor: pointer;
|
|
30
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { Host, h } from '@stencil/core';
|
|
2
|
+
export class TttxPopoverContent {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.header = undefined;
|
|
5
|
+
this.body = undefined;
|
|
6
|
+
this.linkcontext = undefined;
|
|
7
|
+
this.linktext = undefined;
|
|
8
|
+
}
|
|
9
|
+
render() {
|
|
10
|
+
return (h(Host, null, this.header && h("h4", null, this.header), this.body && h("p", null, this.body), this.linkcontext && h("span", { class: "linky", onClick: (evt) => console.log(this.linkcontext, evt) }, this.linktext || 'More Information')));
|
|
11
|
+
}
|
|
12
|
+
static get is() { return "tttx-popover-content"; }
|
|
13
|
+
static get encapsulation() { return "shadow"; }
|
|
14
|
+
static get originalStyleUrls() {
|
|
15
|
+
return {
|
|
16
|
+
"$": ["tttx-popover-content.scss"]
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
static get styleUrls() {
|
|
20
|
+
return {
|
|
21
|
+
"$": ["tttx-popover-content.css"]
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
static get properties() {
|
|
25
|
+
return {
|
|
26
|
+
"header": {
|
|
27
|
+
"type": "string",
|
|
28
|
+
"mutable": false,
|
|
29
|
+
"complexType": {
|
|
30
|
+
"original": "string",
|
|
31
|
+
"resolved": "string",
|
|
32
|
+
"references": {}
|
|
33
|
+
},
|
|
34
|
+
"required": false,
|
|
35
|
+
"optional": false,
|
|
36
|
+
"docs": {
|
|
37
|
+
"tags": [],
|
|
38
|
+
"text": ""
|
|
39
|
+
},
|
|
40
|
+
"attribute": "header",
|
|
41
|
+
"reflect": false
|
|
42
|
+
},
|
|
43
|
+
"body": {
|
|
44
|
+
"type": "string",
|
|
45
|
+
"mutable": false,
|
|
46
|
+
"complexType": {
|
|
47
|
+
"original": "string",
|
|
48
|
+
"resolved": "string",
|
|
49
|
+
"references": {}
|
|
50
|
+
},
|
|
51
|
+
"required": false,
|
|
52
|
+
"optional": false,
|
|
53
|
+
"docs": {
|
|
54
|
+
"tags": [],
|
|
55
|
+
"text": ""
|
|
56
|
+
},
|
|
57
|
+
"attribute": "body",
|
|
58
|
+
"reflect": false
|
|
59
|
+
},
|
|
60
|
+
"linkcontext": {
|
|
61
|
+
"type": "string",
|
|
62
|
+
"mutable": false,
|
|
63
|
+
"complexType": {
|
|
64
|
+
"original": "string",
|
|
65
|
+
"resolved": "string",
|
|
66
|
+
"references": {}
|
|
67
|
+
},
|
|
68
|
+
"required": false,
|
|
69
|
+
"optional": false,
|
|
70
|
+
"docs": {
|
|
71
|
+
"tags": [],
|
|
72
|
+
"text": ""
|
|
73
|
+
},
|
|
74
|
+
"attribute": "linkcontext",
|
|
75
|
+
"reflect": false
|
|
76
|
+
},
|
|
77
|
+
"linktext": {
|
|
78
|
+
"type": "string",
|
|
79
|
+
"mutable": false,
|
|
80
|
+
"complexType": {
|
|
81
|
+
"original": "string",
|
|
82
|
+
"resolved": "string",
|
|
83
|
+
"references": {}
|
|
84
|
+
},
|
|
85
|
+
"required": false,
|
|
86
|
+
"optional": false,
|
|
87
|
+
"docs": {
|
|
88
|
+
"tags": [],
|
|
89
|
+
"text": ""
|
|
90
|
+
},
|
|
91
|
+
"attribute": "linktext",
|
|
92
|
+
"reflect": false
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
}
|