@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.
Files changed (61) hide show
  1. package/package.json +1 -1
  2. package/components/README.md +0 -55
  3. package/components/dist/cjs/index-9441fd8e.js +0 -1554
  4. package/components/dist/cjs/index.cjs.js +0 -2
  5. package/components/dist/cjs/loader.cjs.js +0 -21
  6. package/components/dist/cjs/salla-login_2.cjs.entry.js +0 -131
  7. package/components/dist/cjs/twilight-components.cjs.js +0 -19
  8. package/components/dist/collection/collection-manifest.json +0 -13
  9. package/components/dist/collection/components/generate-summary.js +0 -35
  10. package/components/dist/collection/components/salla-login/salla-login.css +0 -104
  11. package/components/dist/collection/components/salla-login/salla-login.js +0 -113
  12. package/components/dist/collection/components/search-modal/search-modal.css +0 -9
  13. package/components/dist/collection/components/search-modal/search-modal.js +0 -161
  14. package/components/dist/collection/index.js +0 -1
  15. package/components/dist/collection/interfaces/colors.js +0 -1
  16. package/components/dist/collection/interfaces/index.js +0 -2
  17. package/components/dist/collection/interfaces/ratio.js +0 -1
  18. package/components/dist/collection/plugins/tailwind-theme/index.js +0 -32
  19. package/components/dist/collection/plugins/tailwind-theme/scripts/generator.js +0 -51
  20. package/components/dist/collection/utils/utils.js +0 -16
  21. package/components/dist/esm/index-63e5409f.js +0 -1527
  22. package/components/dist/esm/index.js +0 -1
  23. package/components/dist/esm/loader.js +0 -17
  24. package/components/dist/esm/polyfills/core-js.js +0 -11
  25. package/components/dist/esm/polyfills/css-shim.js +0 -1
  26. package/components/dist/esm/polyfills/dom.js +0 -79
  27. package/components/dist/esm/polyfills/es5-html-element.js +0 -1
  28. package/components/dist/esm/polyfills/index.js +0 -34
  29. package/components/dist/esm/polyfills/system.js +0 -6
  30. package/components/dist/esm/salla-login_2.entry.js +0 -126
  31. package/components/dist/esm/twilight-components.js +0 -17
  32. package/components/dist/index.cjs.js +0 -1
  33. package/components/dist/index.js +0 -1
  34. package/components/dist/twilight-components/index.esm.js +0 -0
  35. package/components/dist/twilight-components/p-3d53781c.js +0 -1
  36. package/components/dist/twilight-components/p-fccb89fa.entry.js +0 -1
  37. package/components/dist/twilight-components/twilight-components.esm.js +0 -1
  38. package/components/dist/types/components/salla-login/salla-login.d.ts +0 -14
  39. package/components/dist/types/components/search-modal/search-modal.d.ts +0 -26
  40. package/components/dist/types/components.d.ts +0 -76
  41. package/components/dist/types/index.d.ts +0 -6
  42. package/components/dist/types/interfaces/colors.d.ts +0 -1
  43. package/components/dist/types/interfaces/index.d.ts +0 -2
  44. package/components/dist/types/interfaces/ratio.d.ts +0 -1
  45. package/components/dist/types/stencil-public-runtime.d.ts +0 -1563
  46. package/components/dist/types/utils/utils.d.ts +0 -6
  47. package/components/loader/cdn.js +0 -3
  48. package/components/loader/index.cjs.js +0 -3
  49. package/components/loader/index.d.ts +0 -13
  50. package/components/loader/index.es2017.js +0 -3
  51. package/components/loader/index.js +0 -4
  52. package/components/loader/package.json +0 -10
  53. package/components/package.json +0 -70
  54. package/components/src/plugins/tailwind-theme/index.js +0 -32
  55. package/components/src/plugins/tailwind-theme/package.json +0 -27
  56. package/components/src/plugins/tailwind-theme/readme.md +0 -47
  57. package/components/src/plugins/tailwind-theme/safe-list-css.txt +0 -19
  58. package/components/src/plugins/tailwind-theme/utilities.json +0 -1
  59. package/components.js +0 -1
  60. package/tailwind.js +0 -1
  61. package/tailwind_css_list.js +0 -1
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -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,9 +0,0 @@
1
- /**
2
- * Initial Variables
3
- */
4
- /**
5
- * Functions
6
- */
7
- /**
8
- * Delivered variables
9
- */
@@ -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,2 +0,0 @@
1
- export * from './colors';
2
- export * from './ratio';
@@ -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
- });