@everymatrix/general-icon-progress-bar 0.0.383

Sign up to get free protection for your applications and to get access to all the features.
Files changed (15) hide show
  1. package/README.md +30 -0
  2. package/dist/general-icon-progress-bar.js +580 -0
  3. package/dist/general-icon-progress-bar.js.map +1 -0
  4. package/index.html +37 -0
  5. package/index.js +1 -0
  6. package/package.json +40 -0
  7. package/public/favicon.png +0 -0
  8. package/public/reset.css +48 -0
  9. package/rollup.config.js +59 -0
  10. package/src/GeneralIconProgressBar.svelte +147 -0
  11. package/src/i18n.js +27 -0
  12. package/src/index.ts +4 -0
  13. package/src/translations.js +17 -0
  14. package/stories/GeneralIconProgressBar.stories.js +13 -0
  15. package/tsconfig.json +6 -0
package/index.html ADDED
@@ -0,0 +1,37 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset='utf-8'>
5
+ <meta name='viewport' content='width=device-width,initial-scale=1'>
6
+
7
+ <title>
8
+ general-icon-progress-bar
9
+ </title>
10
+ <link rel="stylesheet" href="public/reset.css">
11
+ <script src='dist/general-icon-progress-bar.js'></script>
12
+ </head>
13
+
14
+ <body>
15
+ <style>
16
+ html,body { margin: 0; padding: 0; height: 100%; font-family: "Helvetica Neue", "Helvetica", sans-serif; }
17
+ .header { display: flex; justify-content: center; align-items: center; padding: 10px 20px; margin-bottom: 20px; background: #42a3e2; box-shadow: 3px 4px 5px 0px rgba(0,0,0, .2); }
18
+ .header__logo svg { height: 50px; width: 50px; margin-right: 5px; }
19
+ .header__name { color: #fff; }
20
+ .header__name span { margin-right: 10px; font-weight: bold; }
21
+ .webcomponent { padding: 10px 20px; }
22
+ </style>
23
+ <header class="header">
24
+ <div class="header__logo">
25
+ <svg xmlns="http://www.w3.org/2000/svg" width="161" height="132" viewBox="0 0 161 132"><defs><linearGradient x1="0%" y1="50%" y2="50%" id="a"><stop stop-color="#2A3B8F" offset="0%"/><stop stop-color="#29ABE2" offset="100%"/></linearGradient><linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="c"><stop stop-color="#B4D44E" offset="0%"/><stop stop-color="#E7F716" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="#166DA5" d="M160.6 65.9l-17.4 29.3-24.4-29.7 24.4-28.9z"/><path fill="#8FDB69" d="M141.3 100.2l-26.5-31.7-15.9 26.6 24.7 36.1z"/><path fill="#166DA5" d="M141 31.4l-26.2 31.8-15.9-26.6L123.6.9z"/><path fill="url(#a)" opacity=".95" d="M61.1 31.4H141L123.4.7H78.7z M114.8 63.3H159l-15.9-26.8H98.8"/><path fill="url(#c)" opacity=".95" d="M141.3 100.3H61l17.6 30.5h45z M114.8 68.4H159l-15.9 26.8H98.8"/><path fill="#010101" d="M78.6 130.8L41 65.8 79.1.8H37.9L.4 65.8l37.5 65z"/></g></svg>
26
+ </div>
27
+ <h1 class="header__name">
28
+ <span>WEBCOMPONENT:</span> general-icon-progress-bar
29
+ </h1>
30
+ </header>
31
+
32
+ <div class="webcomponent" style="height: 1.5rem">
33
+ <general-icon-progress-bar currentstep="1" total="5" showaspercent="false" lang="en"></general-icon-progress-bar>
34
+ </div>
35
+
36
+ </body>
37
+ </html>
package/index.js ADDED
@@ -0,0 +1 @@
1
+ import './dist/general-icon-progress-bar.js';
package/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "@everymatrix/general-icon-progress-bar",
3
+ "version": "0.0.383",
4
+ "main": "index.js",
5
+ "svelte": "src/index.ts",
6
+ "scripts": {
7
+ "start": "sirv public",
8
+ "build": "cross-env NODE_ENV=production rollup -c",
9
+ "dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
10
+ "validate": "svelte-check",
11
+ "test": "echo"
12
+ },
13
+ "devDependencies": {
14
+ "@rollup/plugin-babel": "^5.3.0",
15
+ "@rollup/plugin-commonjs": "^16.0.0",
16
+ "@rollup/plugin-node-resolve": "^10.0.0",
17
+ "@rollup/plugin-typescript": "^6.0.0",
18
+ "@tsconfig/svelte": "^1.0.0",
19
+ "node-sass": "^5.0.0",
20
+ "rollup": "^2.3.4",
21
+ "rollup-plugin-dev-server": "^0.4.3",
22
+ "rollup-plugin-livereload": "^2.0.0",
23
+ "rollup-plugin-svelte": "^7.0.0",
24
+ "rollup-plugin-terser": "^7.0.0",
25
+ "rollup-plugin-uglify": "^6.0.4",
26
+ "svelte-check": "^1.0.0",
27
+ "svelte-preprocess": "^4.0.0",
28
+ "tslib": "^2.0.0",
29
+ "typescript": "^3.9.3"
30
+ },
31
+ "dependencies": {
32
+ "cross-env": "^7.0.3",
33
+ "sirv-cli": "^1.0.0",
34
+ "svelte": "^3.0.0"
35
+ },
36
+ "publishConfig": {
37
+ "access": "public"
38
+ },
39
+ "gitHead": "0f3187a9fae074159e05a8e9f534d13c88c4d001"
40
+ }
package/public/favicon.png ADDED
Binary file
package/public/reset.css ADDED
@@ -0,0 +1,48 @@
1
+ /* http://meyerweb.com/eric/tools/css/reset/
2
+ v2.0 | 20110126
3
+ License: none (public domain)
4
+ */
5
+
6
+ html, body, div, span, applet, object, iframe,
7
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8
+ a, abbr, acronym, address, big, cite, code,
9
+ del, dfn, em, img, ins, kbd, q, s, samp,
10
+ small, strike, strong, sub, sup, tt, var,
11
+ b, u, i, center,
12
+ dl, dt, dd, ol, ul, li,
13
+ fieldset, form, label, legend,
14
+ table, caption, tbody, tfoot, thead, tr, th, td,
15
+ article, aside, canvas, details, embed,
16
+ figure, figcaption, footer, header, hgroup,
17
+ menu, nav, output, ruby, section, summary,
18
+ time, mark, audio, video {
19
+ margin: 0;
20
+ padding: 0;
21
+ border: 0;
22
+ font-size: 100%;
23
+ font: inherit;
24
+ vertical-align: baseline;
25
+ }
26
+ /* HTML5 display-role reset for older browsers */
27
+ article, aside, details, figcaption, figure,
28
+ footer, header, hgroup, menu, nav, section {
29
+ display: block;
30
+ }
31
+ body {
32
+ line-height: 1;
33
+ }
34
+ ol, ul {
35
+ list-style: none;
36
+ }
37
+ blockquote, q {
38
+ quotes: none;
39
+ }
40
+ blockquote:before, blockquote:after,
41
+ q:before, q:after {
42
+ content: '';
43
+ content: none;
44
+ }
45
+ table {
46
+ border-collapse: collapse;
47
+ border-spacing: 0;
48
+ }
package/rollup.config.js ADDED
@@ -0,0 +1,59 @@
1
+ import svelte from 'rollup-plugin-svelte';
2
+ import commonjs from '@rollup/plugin-commonjs';
3
+ import resolve from '@rollup/plugin-node-resolve';
4
+ import serve from 'rollup-plugin-dev-server';
5
+ import livereload from 'rollup-plugin-livereload';
6
+ import { terser } from 'rollup-plugin-terser';
7
+ import sveltePreprocess from 'svelte-preprocess';
8
+ import typescript from '@rollup/plugin-typescript';
9
+ const production = process.env.NODE_ENV === 'production';
10
+ const dev = process.env.NODE_ENV === 'development';
11
+
12
+ export default {
13
+ input: 'src/index.ts',
14
+ output: {
15
+ sourcemap: true,
16
+ format: 'umd',
17
+ name: 'app',
18
+ file: 'dist/general-icon-progress-bar.js'
19
+ },
20
+ plugins: [
21
+ svelte({
22
+ preprocess: sveltePreprocess(),
23
+ compilerOptions: {
24
+ // enable run-time checks when not in production
25
+ customElement: true,
26
+ dev: !production
27
+ }
28
+ }),
29
+ commonjs(),
30
+ resolve({
31
+ browser: true,
32
+ dedupe: ['svelte']
33
+ }),
34
+ dev && serve({
35
+ open: true,
36
+ verbose: true,
37
+ allowCrossOrigin: true,
38
+ historyApiFallback: false,
39
+ host: 'localhost',
40
+ port: 5050,
41
+ }),
42
+ dev && livereload({ watch: ['', 'dist'] }),
43
+ typescript({
44
+ sourceMap: !production,
45
+ inlineSources: !production,
46
+ }),
47
+ // If we're building for production (npm run build
48
+ // instead of npm run dev), minify
49
+ production &&
50
+ terser({
51
+ output: {
52
+ comments: "all"
53
+ },
54
+ })
55
+ ],
56
+ watch: {
57
+ clearScreen: false
58
+ }
59
+ };
package/src/GeneralIconProgressBar.svelte ADDED
@@ -0,0 +1,147 @@
1
+ <svelte:options tag={null} />
2
+ <script lang="ts">
3
+ import { onMount } from 'svelte';
4
+ import { _, addNewMessages, setLocale, setupI18n } from './i18n';
5
+ import { GeneralIconProgressBarTranslations } from './translations';
6
+
7
+ export let currentstep:number = 0;
8
+ export let total:number = 1;
9
+ export let showaspercent:string;
10
+ export let lang:string = 'en';
11
+ export let status:string;
12
+
13
+ let progressElement:any;
14
+ let stepTextElement: any;
15
+ let stepBarElement:any;
16
+ let progressText:string;
17
+ let parentElementHeight:any;
18
+ let triangleHeight:string;
19
+ let halfOfTriangleHeight:any;
20
+ let stepValue:any;
21
+ let stepBarBorderRadius:string = '0px';
22
+ let curTatus:string='active';
23
+
24
+ setupI18n({ withLocale: 'en', translations: {}});
25
+
26
+ Object.keys(GeneralIconProgressBarTranslations).forEach((item: any) => {
27
+ addNewMessages(item, GeneralIconProgressBarTranslations[item]);
28
+ });
29
+
30
+ const setActiveLanguage = ():void => {
31
+ setLocale(lang);
32
+ }
33
+
34
+ const updateStepValue=()=>{
35
+ let stepValue:number = currentstep/total * 100;
36
+ let delay = progressText ? 573 : 0;
37
+ setTimeout(()=>{
38
+ if(showaspercent || showaspercent === 'true'){
39
+ progressText = `${stepValue}%`;
40
+ }else{
41
+ progressText = `${currentstep}/${total} ${$_('progressBar.bets')}`;
42
+ }
43
+ }, delay);
44
+ if(stepValue == 0 || stepValue == 100){
45
+ triangleHeight = '0px';
46
+ halfOfTriangleHeight = '0px';
47
+ stepBarBorderRadius = stepValue == 100 ? '3px' : '0px';
48
+ }else{
49
+ triangleHeight = `${progressElement.offsetHeight}px`;
50
+ parentElementHeight = triangleHeight;
51
+ halfOfTriangleHeight = `${progressElement.offsetHeight/3 }px`;
52
+ stepBarBorderRadius = '0px';
53
+ }
54
+ stepTextElement.style.setProperty(`--parentElementHeight`, parentElementHeight);
55
+ stepBarElement.style.setProperty(`--currentStep`, stepValue+"%");
56
+ stepBarElement.style.setProperty(`--triangleHeight`, triangleHeight);
57
+ stepBarElement.style.setProperty(`--halfOfTriangleHeight`, halfOfTriangleHeight);
58
+ stepBarElement.style.setProperty(`--stepBarBorderRadius`, stepBarBorderRadius);
59
+ }
60
+
61
+ const setCurrentStatus = () =>{
62
+ curTatus = status == 'active' ? '' : 'inactive';
63
+ }
64
+
65
+ onMount(()=>{
66
+ updateStepValue();
67
+ });
68
+ $: currentstep && total && updateStepValue();
69
+ $: lang && setActiveLanguage();
70
+ $: status && setCurrentStatus();
71
+
72
+ </script>
73
+ <div class="general-icon-progress-bar" bind:this={progressElement} part="totalBar">
74
+ <div class='stepBar {curTatus}' bind:this={stepBarElement} part="stepBar">
75
+ <span bind:this={stepTextElement} part="progressText">{progressText}</span>
76
+ </div>
77
+ </div>
78
+ <style lang="scss">
79
+ :host {
80
+ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
81
+ }
82
+
83
+ *,
84
+ *::before,
85
+ *::after {
86
+ margin: 0;
87
+ padding: 0;
88
+ list-style: none;
89
+ text-decoration: none;
90
+ outline: none;
91
+ box-sizing: border-box;
92
+ }
93
+
94
+ .general-icon-progress-bar {
95
+ background: var(--emfe-w-color-black, #000000);
96
+ color: var(--emfe-w-color-white, #FFFFFF);
97
+ height: 100%;
98
+ background: rgba(0, 0, 0, 0.8);
99
+ border-radius: 3px;
100
+ }
101
+ .stepBar.inactive::after{
102
+ border-color: #a6a4a1 transparent transparent transparent;
103
+ }
104
+ .stepBar.inactive{
105
+ background: linear-gradient(270deg, #a2a09e 8.82%, #aba9ad 99.63%);
106
+ }
107
+ .stepBar.inactive span{
108
+ color: rgba(112,106,106, 0.8);
109
+ }
110
+ .stepBar span {
111
+ font-weight: 700;
112
+ font-size: 11px;
113
+ line-height: var(--parentElementHeight, 20px);
114
+ align-items: center;
115
+ color: rgba(0, 0, 0, 0.8);
116
+ text-align: right;
117
+ }
118
+
119
+ .stepBar::after {
120
+ content: ' ';
121
+ position: absolute;
122
+ top: 0;
123
+ border-width: 20px 10px 20px 0;
124
+ border-top-width: var(--triangleHeight, 20px);
125
+ border-right-width: var(--halfOfTriangleHeight, 10px);
126
+ border-bottom-width: var(--triangleHeight, 20px);
127
+ border-style: solid;
128
+ border-color: #FCA452 transparent transparent transparent;
129
+ text-align: right;
130
+ }
131
+ .stepBar {
132
+ position: relative;
133
+ width: var(--currentStep, 0);
134
+ height: 100%;
135
+ background: linear-gradient(270deg, #FCA452 8.82%, #600062 99.63%);
136
+ text-align: right;
137
+ border-top-left-radius: 3px;
138
+ border-bottom-left-radius: 3px;
139
+ border-top-right-radius: var(--stepBarBorderRadius, 0px);
140
+ border-bottom-right-radius: var(--stepBarBorderRadius, 0px);
141
+
142
+ transition-property: width;
143
+ transition-duration: 0.18s;
144
+ transition-timing-function: cubic-bezier(.43,0.8,.95,.88);
145
+ transition-delay: 0.3s;
146
+ }
147
+ </style>
package/src/i18n.js ADDED
@@ -0,0 +1,27 @@
1
+ import {
2
+ dictionary,
3
+ locale,
4
+ addMessages,
5
+ _
6
+ } from 'svelte-i18n';
7
+
8
+ function setupI18n({ withLocale: _locale, translations }) {
9
+ locale.subscribe((data) => {
10
+ if (data == null) {
11
+ dictionary.set(translations);
12
+ locale.set(_locale);
13
+ }
14
+ }); // maybe we will need this to make sure that the i18n is set up only once
15
+ /*dictionary.set(translations);
16
+ locale.set(_locale);*/
17
+ }
18
+
19
+ function addNewMessages(lang, dict) {
20
+ addMessages(lang, dict);
21
+ }
22
+
23
+ function setLocale(_locale) {
24
+ locale.set(_locale);
25
+ }
26
+
27
+ export { _, setupI18n, addNewMessages, setLocale };
package/src/index.ts ADDED
@@ -0,0 +1,4 @@
1
+ import GeneralIconProgressBar from './GeneralIconProgressBar.svelte';
2
+
3
+ !customElements.get('general-icon-progress-bar') && customElements.define('general-icon-progress-bar', GeneralIconProgressBar);
4
+ export default GeneralIconProgressBar;
package/src/translations.js ADDED
@@ -0,0 +1,17 @@
1
+ export const GeneralIconProgressBarTranslations = {
2
+ en: {
3
+ progressBar:{
4
+ bets: `bets`
5
+ }
6
+ },
7
+ tr: {
8
+ progressBar:{
9
+ bets: `bets`
10
+ }
11
+ },
12
+ el: {
13
+ progressBar:{
14
+ bets: `bets`
15
+ }
16
+ },
17
+ };
package/stories/GeneralIconProgressBar.stories.js ADDED
@@ -0,0 +1,13 @@
1
+ import { html } from 'lit-element';
2
+
3
+ import GeneralIconProgressBar from '../src/GeneralIconProgressBar';
4
+
5
+ // This default export determines where your story goes in the story list
6
+ export default {
7
+ title: 'GeneralIconProgressBar',
8
+ };
9
+
10
+ // 👇 We create a “template” of how args map to rendering
11
+ const GeneralIconProgressBar = ({ aProperty }) => html`<general-icon-progress-bar></general-icon-progress-bar>`;
12
+
13
+ export const FirstStory = GeneralIconProgressBar.bind({});
package/tsconfig.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "extends": "@tsconfig/svelte/tsconfig.json",
3
+
4
+ "include": ["src/**/*"],
5
+ "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
6
+ }