@salla.sa/twilight 2.0.20 → 2.0.22
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/package.json +1 -1
- package/components/README.md +0 -55
- package/components/dist/cjs/index-9441fd8e.js +0 -1554
- package/components/dist/cjs/index.cjs.js +0 -2
- package/components/dist/cjs/loader.cjs.js +0 -21
- package/components/dist/cjs/salla-login_2.cjs.entry.js +0 -131
- package/components/dist/cjs/twilight-components.cjs.js +0 -19
- package/components/dist/collection/collection-manifest.json +0 -13
- package/components/dist/collection/components/generate-summary.js +0 -35
- package/components/dist/collection/components/salla-login/salla-login.css +0 -104
- package/components/dist/collection/components/salla-login/salla-login.js +0 -113
- package/components/dist/collection/components/search-modal/search-modal.css +0 -9
- package/components/dist/collection/components/search-modal/search-modal.js +0 -161
- package/components/dist/collection/index.js +0 -1
- package/components/dist/collection/interfaces/colors.js +0 -1
- package/components/dist/collection/interfaces/index.js +0 -2
- package/components/dist/collection/interfaces/ratio.js +0 -1
- package/components/dist/collection/plugins/tailwind-theme/index.js +0 -32
- package/components/dist/collection/plugins/tailwind-theme/scripts/generator.js +0 -51
- package/components/dist/collection/utils/utils.js +0 -16
- package/components/dist/esm/index-63e5409f.js +0 -1527
- package/components/dist/esm/index.js +0 -1
- package/components/dist/esm/loader.js +0 -17
- package/components/dist/esm/polyfills/core-js.js +0 -11
- package/components/dist/esm/polyfills/css-shim.js +0 -1
- package/components/dist/esm/polyfills/dom.js +0 -79
- package/components/dist/esm/polyfills/es5-html-element.js +0 -1
- package/components/dist/esm/polyfills/index.js +0 -34
- package/components/dist/esm/polyfills/system.js +0 -6
- package/components/dist/esm/salla-login_2.entry.js +0 -126
- package/components/dist/esm/twilight-components.js +0 -17
- package/components/dist/index.cjs.js +0 -1
- package/components/dist/index.js +0 -1
- package/components/dist/twilight-components/index.esm.js +0 -0
- package/components/dist/twilight-components/p-3d53781c.js +0 -1
- package/components/dist/twilight-components/p-fccb89fa.entry.js +0 -1
- package/components/dist/twilight-components/twilight-components.esm.js +0 -1
- package/components/dist/types/components/salla-login/salla-login.d.ts +0 -14
- package/components/dist/types/components/search-modal/search-modal.d.ts +0 -26
- package/components/dist/types/components.d.ts +0 -76
- package/components/dist/types/index.d.ts +0 -6
- package/components/dist/types/interfaces/colors.d.ts +0 -1
- package/components/dist/types/interfaces/index.d.ts +0 -2
- package/components/dist/types/interfaces/ratio.d.ts +0 -1
- package/components/dist/types/stencil-public-runtime.d.ts +0 -1563
- package/components/dist/types/utils/utils.d.ts +0 -6
- package/components/loader/cdn.js +0 -3
- package/components/loader/index.cjs.js +0 -3
- package/components/loader/index.d.ts +0 -13
- package/components/loader/index.es2017.js +0 -3
- package/components/loader/index.js +0 -4
- package/components/loader/package.json +0 -10
- package/components/package.json +0 -70
- package/components/src/plugins/tailwind-theme/index.js +0 -32
- package/components/src/plugins/tailwind-theme/package.json +0 -27
- package/components/src/plugins/tailwind-theme/readme.md +0 -47
- package/components/src/plugins/tailwind-theme/safe-list-css.txt +0 -19
- package/components/src/plugins/tailwind-theme/utilities.json +0 -1
- package/components.js +0 -1
- package/tailwind.js +0 -1
- package/tailwind_css_list.js +0 -1
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-9441fd8e.js');
|
|
6
|
-
|
|
7
|
-
/*
|
|
8
|
-
Stencil Client Patch Esm v2.8.1 | MIT Licensed | https://stenciljs.com
|
|
9
|
-
*/
|
|
10
|
-
const patchEsm = () => {
|
|
11
|
-
return index.promiseResolve();
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
const defineCustomElements = (win, options) => {
|
|
15
|
-
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
|
-
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["salla-login_2.cjs",[[1,"salla-login",{"searchIcon":[1,"search-icon"],"visible":[1540],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32]},[[8,"click","handleClick"]]],[4,"salla-search-modal",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
|
|
18
|
-
});
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
exports.defineCustomElements = defineCustomElements;
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-9441fd8e.js');
|
|
6
|
-
|
|
7
|
-
const sallaLoginCss = ".wrapper{opacity:0;visibility:hidden;position:fixed;width:100%;height:100%;top:0;left:0;background:#fcfcfc;-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;display:flex;align-items:center;justify-content:center;z-index:1050}.wrapper .modal{font-family:Helvetica, sans-serif;font-size:14px;background-color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:90%;border:1px solid rgba(0, 0, 0, 0.2);border-radius:0.3rem}@media (min-width: 576px){.wrapper .modal{max-width:500px}}.wrapper .modal .displayed{display:flex}.wrapper .modal .modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.visible{opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s}.hide{display:none !important}.show{display:block !important}.search-box{display:flex}.search-box input{width:100%;padding:10px;padding-inline-start:32px}.search-box button{background-color:transparent;border:0;position:absolute;padding:12px;left:12px}.results{list-style:none;padding:0;margin:0;max-height:300px;overflow-y:scroll}.results .product-img{width:50px;margin-inline-end:10px}.results a:first-child{margin-top:20px}.results a{display:flex;border-bottom:1px solid #ddd}.results a h5{margin-top:5px}";
|
|
8
|
-
|
|
9
|
-
const SallaLogin = class {
|
|
10
|
-
constructor(hostRef) {
|
|
11
|
-
index.registerInstance(this, hostRef);
|
|
12
|
-
this.fetchStatus = '';
|
|
13
|
-
this.searchIcon = 'Search_Icon.svg';
|
|
14
|
-
/**
|
|
15
|
-
* If 'true' will make the modal visible.
|
|
16
|
-
*/
|
|
17
|
-
this.visible = false;
|
|
18
|
-
this.handleClose = () => {
|
|
19
|
-
this.visible = false;
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
handleClick(ev) {
|
|
23
|
-
if (!ev.path.some(x => x.className && x.className.includes('modal-body')) &&
|
|
24
|
-
ev.target.localName === 'salla-search-modal') {
|
|
25
|
-
this.visible = false;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
render() {
|
|
29
|
-
return (index.h("div", { class: this.visible ? 'wrapper visible' : 'wrapper' }, index.h("div", { class: "modal" }, index.h("div", { class: 'modal-header' }, index.h("h5", { class: "title" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644 \u0625\u0644\u064A \u0627\u0644\u0645\u0648\u0642\u0639"), index.h("button", { type: "button", class: "close", "data-dismiss": "modal", "aria-label": "Close", onClick: this.handleClose }, index.h("span", { "aria-hidden": "true" }, "\u00D7"))), index.h("div", { class: "modal-body" }, index.h("div", { id: "showLoginMethods" }, index.h("p", { class: "text-sm text-gray-text mb-5" }, "\u0627\u062E\u062A\u0631 \u0627\u0644\u0648\u0633\u064A\u0644\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629"), index.h("div", { id: "openEmailLogin", class: "mb-2.5 box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" }, index.h("i", { class: "sicon-mail" }))), index.h("div", { class: "flex-1 min-w-0" }, index.h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" }, index.h("div", { class: "flex-1" }, index.h("span", { class: "absolute inset-0", "aria-hidden": "true" }), index.h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"), index.h("h6", { class: "font-boldf" }, "\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A")), index.h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))), index.h("div", { class: "box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" }, index.h("div", { class: "flex-shrink-0" }, index.h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" }, index.h("i", { class: "sicon-phone" }))), index.h("div", { class: "flex-1 min-w-0" }, index.h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" }, index.h("div", { class: "flex-1" }, index.h("span", { class: "absolute inset-0", "aria-hidden": "true" }), index.h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"), index.h("h6", { class: "font-boldf" }, "\u0627\u0644\u0647\u0627\u062A\u0641")), index.h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))))))));
|
|
30
|
-
}
|
|
31
|
-
static get assetsDirs() { return ["assets"]; }
|
|
32
|
-
};
|
|
33
|
-
SallaLogin.style = sallaLoginCss;
|
|
34
|
-
|
|
35
|
-
const searchModalCss = "";
|
|
36
|
-
|
|
37
|
-
const SearchModal = class {
|
|
38
|
-
constructor(hostRef) {
|
|
39
|
-
index.registerInstance(this, hostRef);
|
|
40
|
-
this.fetchStatus = '';
|
|
41
|
-
this.showModal = false;
|
|
42
|
-
/**
|
|
43
|
-
* The text to overwrite search placeholder.
|
|
44
|
-
*/
|
|
45
|
-
this.searchPlaceholder = 'Search here ...';
|
|
46
|
-
/**
|
|
47
|
-
* The text to overwrite no results text.
|
|
48
|
-
*/
|
|
49
|
-
this.noResultsText = 'There are no results at the moment';
|
|
50
|
-
this.handleChange = event => {
|
|
51
|
-
this.searchTerm = event.target.value;
|
|
52
|
-
this.fetchStatus = 'loading';
|
|
53
|
-
this.showResult = false;
|
|
54
|
-
this.results = [];
|
|
55
|
-
if (this.searchTerm.length > 2) {
|
|
56
|
-
window.salla.search.api
|
|
57
|
-
.search(this.searchTerm)
|
|
58
|
-
.then(response => response)
|
|
59
|
-
.then(response => {
|
|
60
|
-
console.log('response', response);
|
|
61
|
-
this.fetchStatus = 'idle';
|
|
62
|
-
this.results = response.results;
|
|
63
|
-
this.showResult = true;
|
|
64
|
-
if (this.results.length < 1) {
|
|
65
|
-
this.fetchStatus = 'error';
|
|
66
|
-
}
|
|
67
|
-
})
|
|
68
|
-
.catch(err => {
|
|
69
|
-
this.showResult = true;
|
|
70
|
-
this.fetchStatus = 'error';
|
|
71
|
-
console.log(err);
|
|
72
|
-
});
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
this.openSearch = () => {
|
|
76
|
-
this.searchTerm = '';
|
|
77
|
-
this.fetchStatus = '';
|
|
78
|
-
this.results = [];
|
|
79
|
-
this.showModal = true;
|
|
80
|
-
window.scrollTo(0, 0);
|
|
81
|
-
document.getElementsByTagName('html')[0].style.position = 'fixed';
|
|
82
|
-
document.getElementsByTagName('html')[0].style.overflowY = 'scroll';
|
|
83
|
-
};
|
|
84
|
-
this.closeSearch = () => {
|
|
85
|
-
this.searchTerm = '';
|
|
86
|
-
this.fetchStatus = '';
|
|
87
|
-
this.results = [];
|
|
88
|
-
document.getElementsByTagName('html')[0].style.position = 'static';
|
|
89
|
-
document.getElementsByTagName('html')[0].style.overflowY = 'auto';
|
|
90
|
-
this.showModal = false;
|
|
91
|
-
};
|
|
92
|
-
}
|
|
93
|
-
componentWillLoad() {
|
|
94
|
-
this.hasSearchIconSlot = !!this.hostElement.querySelector('[slot="search-icon"]');
|
|
95
|
-
this.hasProductTemplateSlot = !!this.hostElement.querySelector('[slot="product-template"]');
|
|
96
|
-
if (this.hasProductTemplateSlot) {
|
|
97
|
-
this.productTemplateHtml = this.hostElement.querySelector('[slot="product-template"]').innerHTML;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
getProduct(item) {
|
|
101
|
-
var _a, _b;
|
|
102
|
-
// todo use art-template https://aui.github.io/art-template/docs/.
|
|
103
|
-
if (this.hasProductTemplateSlot) {
|
|
104
|
-
let product = this.productTemplateHtml
|
|
105
|
-
.replace("{title}", item.title)
|
|
106
|
-
.replace("{price}", (_a = item.price) === null || _a === void 0 ? void 0 : _a.after)
|
|
107
|
-
.replace("{url}", item.url)
|
|
108
|
-
.replace("{thumb}", item.thumb);
|
|
109
|
-
return (index.h("div", { class: "s-search-modal-product", innerHTML: product }));
|
|
110
|
-
}
|
|
111
|
-
else {
|
|
112
|
-
return (index.h("div", { class: "s-search-modal-product" }, index.h("a", { target: "_blank", href: item.url, class: "s-search-modal-product-image-container" }, index.h("img", { class: "s-search-modal-product-image", src: item.thumb })), index.h("div", { class: "s-search-modal-product-details" }, index.h("div", { class: "s-search-modal-product-title" }, item.title), index.h("div", { class: "s-search-modal-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
render() {
|
|
116
|
-
return (index.h(index.Host, { class: "s-search-modal" }, index.h("button", { type: "button", onClick: this.openSearch, class: "s-search-modal-search-button-icon" }, this.hasSearchIconSlot ? (index.h("slot", { name: "search-icon" })) : (index.h("i", { class: "sicon-search font-bold" }))), this.showModal && (index.h("div", { class: "s-search-modal-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } }, index.h("div", { class: "s-search-modal-wrapper", onClick: this.closeSearch }, index.h("div", { class: "s-search-modal-inner", onClick: e => {
|
|
117
|
-
e.stopPropagation();
|
|
118
|
-
} }, index.h("div", { class: "s-search-modal-search-box-container" }, index.h("div", { class: !this.showResult
|
|
119
|
-
? 's-search-modal-search-box-inner'
|
|
120
|
-
: 's-search-modal-search-box-inner-open' }, index.h("input", { class: "s-search-modal-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }), this.fetchStatus != 'loading' ? (index.h("button", { class: "s-search-modal-search-icon" }, index.h("i", { class: "sicon-search" }))) : (index.h("span", { class: "s-search-modal-spinner" }, index.h("span", { class: "s-search-modal-spinner-loader" }))))), index.h("div", { class: "s-search-modal-search-results" }, this.fetchStatus === 'error' && (index.h("p", { class: "s-search-modal-no-results error p-4 text-sm text-gray-text" }, this.noResultsText)), this.results &&
|
|
121
|
-
this.results.map(item => {
|
|
122
|
-
return this.getProduct(item);
|
|
123
|
-
}))))))));
|
|
124
|
-
}
|
|
125
|
-
static get assetsDirs() { return ["assets"]; }
|
|
126
|
-
get hostElement() { return index.getElement(this); }
|
|
127
|
-
};
|
|
128
|
-
SearchModal.style = searchModalCss;
|
|
129
|
-
|
|
130
|
-
exports.salla_login = SallaLogin;
|
|
131
|
-
exports.salla_search_modal = SearchModal;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const index = require('./index-9441fd8e.js');
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
Stencil Client Patch Browser v2.8.1 | MIT Licensed | https://stenciljs.com
|
|
7
|
-
*/
|
|
8
|
-
const patchBrowser = () => {
|
|
9
|
-
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('twilight-components.cjs.js', document.baseURI).href));
|
|
10
|
-
const opts = {};
|
|
11
|
-
if (importMeta !== '') {
|
|
12
|
-
opts.resourcesUrl = new URL('.', importMeta).href;
|
|
13
|
-
}
|
|
14
|
-
return index.promiseResolve(opts);
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["salla-login_2.cjs",[[1,"salla-login",{"searchIcon":[1,"search-icon"],"visible":[1540],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32]},[[8,"click","handleClick"]]],[4,"salla-search-modal",{"searchPlaceholder":[1,"search-placeholder"],"noResultsText":[1,"no-results-text"],"searchTerm":[32],"results":[32],"fetchStatus":[32],"showResult":[32],"showModal":[32]}]]]], options);
|
|
19
|
-
});
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"entries": [
|
|
3
|
-
"./components/salla-login/salla-login.js",
|
|
4
|
-
"./components/search-modal/search-modal.js"
|
|
5
|
-
],
|
|
6
|
-
"compiler": {
|
|
7
|
-
"name": "@stencil/core",
|
|
8
|
-
"version": "2.8.1",
|
|
9
|
-
"typescriptVersion": "4.2.3"
|
|
10
|
-
},
|
|
11
|
-
"collections": [],
|
|
12
|
-
"bundles": []
|
|
13
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
var fs = require('fs'), path = require('path'), util = require('util');
|
|
2
|
-
|
|
3
|
-
var dirToJSON = function (dir, done) {
|
|
4
|
-
var results = [];
|
|
5
|
-
|
|
6
|
-
function recWalk(d, res) {
|
|
7
|
-
var list = fs.readdirSync(d);
|
|
8
|
-
list.forEach((name) => {
|
|
9
|
-
var file = path.resolve(d, name);
|
|
10
|
-
var stat = fs.statSync(file);
|
|
11
|
-
if (stat && stat.isDirectory()) {
|
|
12
|
-
var title;
|
|
13
|
-
if (name) {
|
|
14
|
-
title = 'salla-' + name
|
|
15
|
-
}
|
|
16
|
-
res.push({ title: title, file: name + '/readme.md' });
|
|
17
|
-
}
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
try {
|
|
22
|
-
recWalk(dir, results);
|
|
23
|
-
done(null, results);
|
|
24
|
-
} catch (err) {
|
|
25
|
-
done(err);
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
dirToJSON("src/components", function (err, results) {
|
|
30
|
-
if (err) console.log(err);
|
|
31
|
-
else fs.writeFile('src/components/summary.json', JSON.stringify(results), 'utf8', function (err) {
|
|
32
|
-
if (err) throw err;
|
|
33
|
-
console.log('Saved!');
|
|
34
|
-
});
|
|
35
|
-
});
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Initial Variables
|
|
3
|
-
*/
|
|
4
|
-
/**
|
|
5
|
-
* Functions
|
|
6
|
-
*/
|
|
7
|
-
/**
|
|
8
|
-
* Delivered variables
|
|
9
|
-
*/
|
|
10
|
-
.wrapper {
|
|
11
|
-
opacity: 0;
|
|
12
|
-
visibility: hidden;
|
|
13
|
-
position: fixed;
|
|
14
|
-
width: 100%;
|
|
15
|
-
height: 100%;
|
|
16
|
-
top: 0;
|
|
17
|
-
left: 0;
|
|
18
|
-
background: #fcfcfc;
|
|
19
|
-
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
|
|
20
|
-
transition: opacity 0.5s, visibility 0s 0.5s;
|
|
21
|
-
display: flex;
|
|
22
|
-
align-items: center;
|
|
23
|
-
justify-content: center;
|
|
24
|
-
z-index: 1050;
|
|
25
|
-
}
|
|
26
|
-
.wrapper .modal {
|
|
27
|
-
font-family: Helvetica, sans-serif;
|
|
28
|
-
font-size: 14px;
|
|
29
|
-
background-color: #fff;
|
|
30
|
-
position: absolute;
|
|
31
|
-
top: 50%;
|
|
32
|
-
left: 50%;
|
|
33
|
-
transform: translate(-50%, -50%);
|
|
34
|
-
width: 90%;
|
|
35
|
-
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
36
|
-
border-radius: 0.3rem;
|
|
37
|
-
}
|
|
38
|
-
@media (min-width: 576px) {
|
|
39
|
-
.wrapper .modal {
|
|
40
|
-
max-width: 500px;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
.wrapper .modal .displayed {
|
|
44
|
-
display: flex;
|
|
45
|
-
}
|
|
46
|
-
.wrapper .modal .modal-body {
|
|
47
|
-
position: relative;
|
|
48
|
-
-ms-flex: 1 1 auto;
|
|
49
|
-
flex: 1 1 auto;
|
|
50
|
-
padding: 1rem;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.visible {
|
|
54
|
-
opacity: 1;
|
|
55
|
-
visibility: visible;
|
|
56
|
-
transform: scale(1);
|
|
57
|
-
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.hide {
|
|
61
|
-
display: none !important;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.show {
|
|
65
|
-
display: block !important;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.search-box {
|
|
69
|
-
display: flex;
|
|
70
|
-
}
|
|
71
|
-
.search-box input {
|
|
72
|
-
width: 100%;
|
|
73
|
-
padding: 10px;
|
|
74
|
-
padding-inline-start: 32px;
|
|
75
|
-
}
|
|
76
|
-
.search-box button {
|
|
77
|
-
background-color: transparent;
|
|
78
|
-
border: 0;
|
|
79
|
-
position: absolute;
|
|
80
|
-
padding: 12px;
|
|
81
|
-
left: 12px;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
.results {
|
|
85
|
-
list-style: none;
|
|
86
|
-
padding: 0;
|
|
87
|
-
margin: 0;
|
|
88
|
-
max-height: 300px;
|
|
89
|
-
overflow-y: scroll;
|
|
90
|
-
}
|
|
91
|
-
.results .product-img {
|
|
92
|
-
width: 50px;
|
|
93
|
-
margin-inline-end: 10px;
|
|
94
|
-
}
|
|
95
|
-
.results a:first-child {
|
|
96
|
-
margin-top: 20px;
|
|
97
|
-
}
|
|
98
|
-
.results a {
|
|
99
|
-
display: flex;
|
|
100
|
-
border-bottom: 1px solid #ddd;
|
|
101
|
-
}
|
|
102
|
-
.results a h5 {
|
|
103
|
-
margin-top: 5px;
|
|
104
|
-
}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { Component, h, Prop, Listen, State } from '@stencil/core';
|
|
2
|
-
export class SallaLogin {
|
|
3
|
-
constructor() {
|
|
4
|
-
this.fetchStatus = '';
|
|
5
|
-
this.searchIcon = 'Search_Icon.svg';
|
|
6
|
-
/**
|
|
7
|
-
* If 'true' will make the modal visible.
|
|
8
|
-
*/
|
|
9
|
-
this.visible = false;
|
|
10
|
-
this.handleClose = () => {
|
|
11
|
-
this.visible = false;
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
handleClick(ev) {
|
|
15
|
-
if (!ev.path.some(x => x.className && x.className.includes('modal-body')) &&
|
|
16
|
-
ev.target.localName === 'salla-search-modal') {
|
|
17
|
-
this.visible = false;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
render() {
|
|
21
|
-
return (h("div", { class: this.visible ? 'wrapper visible' : 'wrapper' },
|
|
22
|
-
h("div", { class: "modal" },
|
|
23
|
-
h("div", { class: 'modal-header' },
|
|
24
|
-
h("h5", { class: "title" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644 \u0625\u0644\u064A \u0627\u0644\u0645\u0648\u0642\u0639"),
|
|
25
|
-
h("button", { type: "button", class: "close", "data-dismiss": "modal", "aria-label": "Close", onClick: this.handleClose },
|
|
26
|
-
h("span", { "aria-hidden": "true" }, "\u00D7"))),
|
|
27
|
-
h("div", { class: "modal-body" },
|
|
28
|
-
h("div", { id: "showLoginMethods" },
|
|
29
|
-
h("p", { class: "text-sm text-gray-text mb-5" }, "\u0627\u062E\u062A\u0631 \u0627\u0644\u0648\u0633\u064A\u0644\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629"),
|
|
30
|
-
h("div", { id: "openEmailLogin", class: "mb-2.5 box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" },
|
|
31
|
-
h("div", { class: "flex-shrink-0" },
|
|
32
|
-
h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" },
|
|
33
|
-
h("i", { class: "sicon-mail" }))),
|
|
34
|
-
h("div", { class: "flex-1 min-w-0" },
|
|
35
|
-
h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" },
|
|
36
|
-
h("div", { class: "flex-1" },
|
|
37
|
-
h("span", { class: "absolute inset-0", "aria-hidden": "true" }),
|
|
38
|
-
h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"),
|
|
39
|
-
h("h6", { class: "font-boldf" }, "\u0627\u0644\u0628\u0631\u064A\u062F \u0627\u0644\u0625\u0644\u0643\u062A\u0631\u0648\u0646\u064A")),
|
|
40
|
-
h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))),
|
|
41
|
-
h("div", { class: "box-content relative rounded-md border border-border-color bg-white py-5 pe-4 ps-5 flex items-center space-s-3 hover:border-gray-200" },
|
|
42
|
-
h("div", { class: "flex-shrink-0" },
|
|
43
|
-
h("div", { class: "bg-primary w-12 h-12 text-lg text-white rounded-icon" },
|
|
44
|
-
h("i", { class: "sicon-phone" }))),
|
|
45
|
-
h("div", { class: "flex-1 min-w-0" },
|
|
46
|
-
h("a", { href: "#", class: "focus:outline-none flex justify-between items-center" },
|
|
47
|
-
h("div", { class: "flex-1" },
|
|
48
|
-
h("span", { class: "absolute inset-0", "aria-hidden": "true" }),
|
|
49
|
-
h("p", { class: "text-sm text-gray-text" }, "\u0633\u062C\u0644 \u062F\u062E\u0648\u0644"),
|
|
50
|
-
h("h6", { class: "font-boldf" }, "\u0627\u0644\u0647\u0627\u062A\u0641")),
|
|
51
|
-
h("i", { class: "sicon-keyboard_arrow_left text-primary text-xl" })))))))));
|
|
52
|
-
}
|
|
53
|
-
static get is() { return "salla-login"; }
|
|
54
|
-
static get encapsulation() { return "shadow"; }
|
|
55
|
-
static get originalStyleUrls() { return {
|
|
56
|
-
"$": ["salla-login.scss"]
|
|
57
|
-
}; }
|
|
58
|
-
static get styleUrls() { return {
|
|
59
|
-
"$": ["salla-login.css"]
|
|
60
|
-
}; }
|
|
61
|
-
static get assetsDirs() { return ["assets"]; }
|
|
62
|
-
static get properties() { return {
|
|
63
|
-
"searchIcon": {
|
|
64
|
-
"type": "string",
|
|
65
|
-
"mutable": false,
|
|
66
|
-
"complexType": {
|
|
67
|
-
"original": "string",
|
|
68
|
-
"resolved": "string",
|
|
69
|
-
"references": {}
|
|
70
|
-
},
|
|
71
|
-
"required": false,
|
|
72
|
-
"optional": false,
|
|
73
|
-
"docs": {
|
|
74
|
-
"tags": [],
|
|
75
|
-
"text": ""
|
|
76
|
-
},
|
|
77
|
-
"attribute": "search-icon",
|
|
78
|
-
"reflect": false,
|
|
79
|
-
"defaultValue": "'Search_Icon.svg'"
|
|
80
|
-
},
|
|
81
|
-
"visible": {
|
|
82
|
-
"type": "boolean",
|
|
83
|
-
"mutable": true,
|
|
84
|
-
"complexType": {
|
|
85
|
-
"original": "boolean",
|
|
86
|
-
"resolved": "boolean",
|
|
87
|
-
"references": {}
|
|
88
|
-
},
|
|
89
|
-
"required": false,
|
|
90
|
-
"optional": false,
|
|
91
|
-
"docs": {
|
|
92
|
-
"tags": [],
|
|
93
|
-
"text": "If 'true' will make the modal visible."
|
|
94
|
-
},
|
|
95
|
-
"attribute": "visible",
|
|
96
|
-
"reflect": true,
|
|
97
|
-
"defaultValue": "false"
|
|
98
|
-
}
|
|
99
|
-
}; }
|
|
100
|
-
static get states() { return {
|
|
101
|
-
"searchTerm": {},
|
|
102
|
-
"results": {},
|
|
103
|
-
"fetchStatus": {},
|
|
104
|
-
"showResult": {}
|
|
105
|
-
}; }
|
|
106
|
-
static get listeners() { return [{
|
|
107
|
-
"name": "click",
|
|
108
|
-
"method": "handleClick",
|
|
109
|
-
"target": "window",
|
|
110
|
-
"capture": false,
|
|
111
|
-
"passive": false
|
|
112
|
-
}]; }
|
|
113
|
-
}
|
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
import { Component, h, Host, Prop, State, Element } from '@stencil/core';
|
|
2
|
-
export class SearchModal {
|
|
3
|
-
constructor() {
|
|
4
|
-
this.fetchStatus = '';
|
|
5
|
-
this.showModal = false;
|
|
6
|
-
/**
|
|
7
|
-
* The text to overwrite search placeholder.
|
|
8
|
-
*/
|
|
9
|
-
this.searchPlaceholder = 'Search here ...';
|
|
10
|
-
/**
|
|
11
|
-
* The text to overwrite no results text.
|
|
12
|
-
*/
|
|
13
|
-
this.noResultsText = 'There are no results at the moment';
|
|
14
|
-
this.handleChange = event => {
|
|
15
|
-
this.searchTerm = event.target.value;
|
|
16
|
-
this.fetchStatus = 'loading';
|
|
17
|
-
this.showResult = false;
|
|
18
|
-
this.results = [];
|
|
19
|
-
if (this.searchTerm.length > 2) {
|
|
20
|
-
window.salla.search.api
|
|
21
|
-
.search(this.searchTerm)
|
|
22
|
-
.then(response => response)
|
|
23
|
-
.then(response => {
|
|
24
|
-
console.log('response', response);
|
|
25
|
-
this.fetchStatus = 'idle';
|
|
26
|
-
this.results = response.results;
|
|
27
|
-
this.showResult = true;
|
|
28
|
-
if (this.results.length < 1) {
|
|
29
|
-
this.fetchStatus = 'error';
|
|
30
|
-
}
|
|
31
|
-
})
|
|
32
|
-
.catch(err => {
|
|
33
|
-
this.showResult = true;
|
|
34
|
-
this.fetchStatus = 'error';
|
|
35
|
-
console.log(err);
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
this.openSearch = () => {
|
|
40
|
-
this.searchTerm = '';
|
|
41
|
-
this.fetchStatus = '';
|
|
42
|
-
this.results = [];
|
|
43
|
-
this.showModal = true;
|
|
44
|
-
window.scrollTo(0, 0);
|
|
45
|
-
document.getElementsByTagName('html')[0].style.position = 'fixed';
|
|
46
|
-
document.getElementsByTagName('html')[0].style.overflowY = 'scroll';
|
|
47
|
-
};
|
|
48
|
-
this.closeSearch = () => {
|
|
49
|
-
this.searchTerm = '';
|
|
50
|
-
this.fetchStatus = '';
|
|
51
|
-
this.results = [];
|
|
52
|
-
document.getElementsByTagName('html')[0].style.position = 'static';
|
|
53
|
-
document.getElementsByTagName('html')[0].style.overflowY = 'auto';
|
|
54
|
-
this.showModal = false;
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
componentWillLoad() {
|
|
58
|
-
this.hasSearchIconSlot = !!this.hostElement.querySelector('[slot="search-icon"]');
|
|
59
|
-
this.hasProductTemplateSlot = !!this.hostElement.querySelector('[slot="product-template"]');
|
|
60
|
-
if (this.hasProductTemplateSlot) {
|
|
61
|
-
this.productTemplateHtml = this.hostElement.querySelector('[slot="product-template"]').innerHTML;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
getProduct(item) {
|
|
65
|
-
var _a, _b;
|
|
66
|
-
// todo use art-template https://aui.github.io/art-template/docs/.
|
|
67
|
-
if (this.hasProductTemplateSlot) {
|
|
68
|
-
let product = this.productTemplateHtml
|
|
69
|
-
.replace("{title}", item.title)
|
|
70
|
-
.replace("{price}", (_a = item.price) === null || _a === void 0 ? void 0 : _a.after)
|
|
71
|
-
.replace("{url}", item.url)
|
|
72
|
-
.replace("{thumb}", item.thumb);
|
|
73
|
-
return (h("div", { class: "s-search-modal-product", innerHTML: product }));
|
|
74
|
-
}
|
|
75
|
-
else {
|
|
76
|
-
return (h("div", { class: "s-search-modal-product" },
|
|
77
|
-
h("a", { target: "_blank", href: item.url, class: "s-search-modal-product-image-container" },
|
|
78
|
-
h("img", { class: "s-search-modal-product-image", src: item.thumb })),
|
|
79
|
-
h("div", { class: "s-search-modal-product-details" },
|
|
80
|
-
h("div", { class: "s-search-modal-product-title" }, item.title),
|
|
81
|
-
h("div", { class: "s-search-modal-product-price" }, (_b = item.price) === null || _b === void 0 ? void 0 : _b.after))));
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
render() {
|
|
85
|
-
return (h(Host, { class: "s-search-modal" },
|
|
86
|
-
h("button", { type: "button", onClick: this.openSearch, class: "s-search-modal-search-button-icon" }, this.hasSearchIconSlot ? (h("slot", { name: "search-icon" })) : (h("i", { class: "sicon-search font-bold" }))),
|
|
87
|
-
this.showModal && (h("div", { class: "s-search-modal-container", style: { backgroundColor: 'rgba(0,0,0,0.5)' } },
|
|
88
|
-
h("div", { class: "s-search-modal-wrapper", onClick: this.closeSearch },
|
|
89
|
-
h("div", { class: "s-search-modal-inner", onClick: e => {
|
|
90
|
-
e.stopPropagation();
|
|
91
|
-
} },
|
|
92
|
-
h("div", { class: "s-search-modal-search-box-container" },
|
|
93
|
-
h("div", { class: !this.showResult
|
|
94
|
-
? 's-search-modal-search-box-inner'
|
|
95
|
-
: 's-search-modal-search-box-inner-open' },
|
|
96
|
-
h("input", { class: "s-search-modal-input", type: "text", placeholder: this.searchPlaceholder, value: this.searchTerm, onInput: event => this.handleChange(event) }),
|
|
97
|
-
this.fetchStatus != 'loading' ? (h("button", { class: "s-search-modal-search-icon" },
|
|
98
|
-
h("i", { class: "sicon-search" }))) : (h("span", { class: "s-search-modal-spinner" },
|
|
99
|
-
h("span", { class: "s-search-modal-spinner-loader" }))))),
|
|
100
|
-
h("div", { class: "s-search-modal-search-results" },
|
|
101
|
-
this.fetchStatus === 'error' && (h("p", { class: "s-search-modal-no-results error p-4 text-sm text-gray-text" }, this.noResultsText)),
|
|
102
|
-
this.results &&
|
|
103
|
-
this.results.map(item => {
|
|
104
|
-
return this.getProduct(item);
|
|
105
|
-
}))))))));
|
|
106
|
-
}
|
|
107
|
-
static get is() { return "salla-search-modal"; }
|
|
108
|
-
static get originalStyleUrls() { return {
|
|
109
|
-
"$": ["search-modal.scss"]
|
|
110
|
-
}; }
|
|
111
|
-
static get styleUrls() { return {
|
|
112
|
-
"$": ["search-modal.css"]
|
|
113
|
-
}; }
|
|
114
|
-
static get assetsDirs() { return ["assets"]; }
|
|
115
|
-
static get properties() { return {
|
|
116
|
-
"searchPlaceholder": {
|
|
117
|
-
"type": "string",
|
|
118
|
-
"mutable": false,
|
|
119
|
-
"complexType": {
|
|
120
|
-
"original": "string",
|
|
121
|
-
"resolved": "string",
|
|
122
|
-
"references": {}
|
|
123
|
-
},
|
|
124
|
-
"required": false,
|
|
125
|
-
"optional": false,
|
|
126
|
-
"docs": {
|
|
127
|
-
"tags": [],
|
|
128
|
-
"text": "The text to overwrite search placeholder."
|
|
129
|
-
},
|
|
130
|
-
"attribute": "search-placeholder",
|
|
131
|
-
"reflect": false,
|
|
132
|
-
"defaultValue": "'Search here ...'"
|
|
133
|
-
},
|
|
134
|
-
"noResultsText": {
|
|
135
|
-
"type": "string",
|
|
136
|
-
"mutable": false,
|
|
137
|
-
"complexType": {
|
|
138
|
-
"original": "string",
|
|
139
|
-
"resolved": "string",
|
|
140
|
-
"references": {}
|
|
141
|
-
},
|
|
142
|
-
"required": false,
|
|
143
|
-
"optional": false,
|
|
144
|
-
"docs": {
|
|
145
|
-
"tags": [],
|
|
146
|
-
"text": "The text to overwrite no results text."
|
|
147
|
-
},
|
|
148
|
-
"attribute": "no-results-text",
|
|
149
|
-
"reflect": false,
|
|
150
|
-
"defaultValue": "'There are no results at the moment'"
|
|
151
|
-
}
|
|
152
|
-
}; }
|
|
153
|
-
static get states() { return {
|
|
154
|
-
"searchTerm": {},
|
|
155
|
-
"results": {},
|
|
156
|
-
"fetchStatus": {},
|
|
157
|
-
"showResult": {},
|
|
158
|
-
"showModal": {}
|
|
159
|
-
}; }
|
|
160
|
-
static get elementRef() { return "hostElement"; }
|
|
161
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './components';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
const plugin = require('tailwindcss/plugin');
|
|
2
|
-
const fs = require('fs');
|
|
3
|
-
const path = require('path');
|
|
4
|
-
|
|
5
|
-
module.exports = plugin.withOptions(() => {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
return function({addUtilities}) {
|
|
9
|
-
addUtilities({
|
|
10
|
-
// TODO :: find if there are used and defined them here if its.
|
|
11
|
-
'.anime-item': {},
|
|
12
|
-
'.text-md': {},
|
|
13
|
-
'.items-top': {},
|
|
14
|
-
'.error': {},
|
|
15
|
-
'.search-box': {},
|
|
16
|
-
'.spinner-loader-wrap': {}
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
// todo :: move it to global
|
|
20
|
-
addUtilities({
|
|
21
|
-
'.spinner-loader': {
|
|
22
|
-
'border-right-color': 'var(--main-color) !important',
|
|
23
|
-
'&.reverse': {
|
|
24
|
-
'border-right-color': '#9f7171 !important',
|
|
25
|
-
'background-color': '#f98181'
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
addUtilities(JSON.parse(fs.readFileSync(path.resolve(__dirname, 'utilities.json'), 'UTF-8')));
|
|
31
|
-
};
|
|
32
|
-
});
|