@everymatrix/general-icon-progress-bar 1.0.15 → 1.0.69

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. package/es2015/general-icon-progress-bar.cjs +1 -0
  2. package/es2015/general-icon-progress-bar.js +16 -0
  3. package/package.json +14 -34
  4. package/README.md +0 -30
  5. package/dist/general-icon-progress-bar.js +0 -580
  6. package/dist/general-icon-progress-bar.js.map +0 -1
  7. package/index.html +0 -37
  8. package/index.js +0 -1
  9. package/public/favicon.png +0 -0
  10. package/public/reset.css +0 -48
  11. package/rollup.config.js +0 -59
  12. package/src/GeneralIconProgressBar.svelte +0 -162
  13. package/src/i18n.js +0 -27
  14. package/src/index.ts +0 -4
  15. package/src/translations.js +0 -17
  16. package/stories/GeneralIconProgressBar.stories.js +0 -13
  17. package/tsconfig.json +0 -6
package/index.html DELETED
@@ -1,37 +0,0 @@
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 DELETED
@@ -1 +0,0 @@
1
- import './dist/general-icon-progress-bar.js';
package/public/favicon.png DELETED
Binary file
package/public/reset.css DELETED
@@ -1,48 +0,0 @@
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 DELETED
@@ -1,59 +0,0 @@
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 DELETED
@@ -1,162 +0,0 @@
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
- export let translationUrl:string = '';
13
-
14
- let progressElement:any;
15
- let stepTextElement: any;
16
- let stepBarElement:any;
17
- let progressText:string;
18
- let parentElementHeight:any;
19
- let triangleHeight:string;
20
- let halfOfTriangleHeight:any;
21
- let stepValue:any;
22
- let stepBarBorderRadius:string = '0px';
23
- let curTatus:string='active';
24
-
25
- setupI18n({ withLocale: 'en', translations: {}});
26
-
27
- const setTranslationUrl = ():void => {
28
- let url:string = translationUrl;
29
-
30
- fetch(url).then((res:any) => res.json())
31
- .then((res) => {
32
- Object.keys(res).forEach((item:any):void => {
33
- addNewMessages(item, res[item]);
34
- });
35
- }).catch((err:any) => {
36
- console.log(err);
37
- });
38
- }
39
-
40
- Object.keys(GeneralIconProgressBarTranslations).forEach((item: any) => {
41
- addNewMessages(item, GeneralIconProgressBarTranslations[item]);
42
- });
43
-
44
- const setActiveLanguage = ():void => {
45
- setLocale(lang);
46
- }
47
-
48
- const updateStepValue=()=>{
49
- let stepValue:number = currentstep/total * 100;
50
- let delay = progressText ? 573 : 0;
51
- setTimeout(()=>{
52
- if(showaspercent || showaspercent === 'true'){
53
- progressText = `${stepValue}%`;
54
- }else{
55
- progressText = `${currentstep}/${total} ${$_('progressBar.bets')}`;
56
- }
57
- }, delay);
58
- if(stepValue == 0 || stepValue == 100){
59
- triangleHeight = '0px';
60
- halfOfTriangleHeight = '0px';
61
- stepBarBorderRadius = stepValue == 100 ? '3px' : '0px';
62
- }else{
63
- triangleHeight = `${progressElement.offsetHeight}px`;
64
- parentElementHeight = triangleHeight;
65
- halfOfTriangleHeight = `${progressElement.offsetHeight/3 }px`;
66
- stepBarBorderRadius = '0px';
67
- }
68
- stepTextElement.style.setProperty(`--parentElementHeight`, parentElementHeight);
69
- stepBarElement.style.setProperty(`--currentStep`, stepValue+"%");
70
- stepBarElement.style.setProperty(`--triangleHeight`, triangleHeight);
71
- stepBarElement.style.setProperty(`--halfOfTriangleHeight`, halfOfTriangleHeight);
72
- stepBarElement.style.setProperty(`--stepBarBorderRadius`, stepBarBorderRadius);
73
- }
74
-
75
- const setCurrentStatus = () =>{
76
- curTatus = status == 'active' ? '' : 'inactive';
77
- }
78
-
79
- onMount(()=>{
80
- updateStepValue();
81
- });
82
- $: currentstep && total && updateStepValue();
83
- $: lang && setActiveLanguage();
84
- $: status && setCurrentStatus();
85
- $: translationUrl && setTranslationUrl();
86
-
87
- </script>
88
- <div class="general-icon-progress-bar" bind:this={progressElement} part="totalBar">
89
- <div class='stepBar {curTatus}' bind:this={stepBarElement} part="stepBar">
90
- <span bind:this={stepTextElement} part="progressText">{progressText}</span>
91
- </div>
92
- </div>
93
- <style lang="scss">
94
- :host {
95
- font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
96
- }
97
-
98
- *,
99
- *::before,
100
- *::after {
101
- margin: 0;
102
- padding: 0;
103
- list-style: none;
104
- text-decoration: none;
105
- outline: none;
106
- box-sizing: border-box;
107
- }
108
-
109
- .general-icon-progress-bar {
110
- background: var(--emfe-w-color-black, #000000);
111
- color: var(--emfe-w-color-white, #FFFFFF);
112
- height: 100%;
113
- background: rgba(0, 0, 0, 0.8);
114
- border-radius: 3px;
115
- }
116
- .stepBar.inactive::after{
117
- border-color: #a6a4a1 transparent transparent transparent;
118
- }
119
- .stepBar.inactive{
120
- background: linear-gradient(270deg, #a2a09e 8.82%, #aba9ad 99.63%);
121
- }
122
- .stepBar.inactive span{
123
- color: rgba(112,106,106, 0.8);
124
- }
125
- .stepBar span {
126
- font-weight: 700;
127
- font-size: 11px;
128
- line-height: var(--parentElementHeight, 20px);
129
- align-items: center;
130
- color: rgba(0, 0, 0, 0.8);
131
- text-align: right;
132
- }
133
-
134
- .stepBar::after {
135
- content: ' ';
136
- position: absolute;
137
- top: 0;
138
- border-width: 20px 10px 20px 0;
139
- border-top-width: var(--triangleHeight, 20px);
140
- border-right-width: var(--halfOfTriangleHeight, 10px);
141
- border-bottom-width: var(--triangleHeight, 20px);
142
- border-style: solid;
143
- border-color: #FCA452 transparent transparent transparent;
144
- text-align: right;
145
- }
146
- .stepBar {
147
- position: relative;
148
- width: var(--currentStep, 0);
149
- height: 100%;
150
- background: linear-gradient(270deg, #FCA452 8.82%, #600062 99.63%);
151
- text-align: right;
152
- border-top-left-radius: 3px;
153
- border-bottom-left-radius: 3px;
154
- border-top-right-radius: var(--stepBarBorderRadius, 0px);
155
- border-bottom-right-radius: var(--stepBarBorderRadius, 0px);
156
-
157
- transition-property: width;
158
- transition-duration: 0.18s;
159
- transition-timing-function: cubic-bezier(.43,0.8,.95,.88);
160
- transition-delay: 0.3s;
161
- }
162
- </style>
package/src/i18n.js DELETED
@@ -1,27 +0,0 @@
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 DELETED
@@ -1,4 +0,0 @@
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 DELETED
@@ -1,17 +0,0 @@
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 DELETED
@@ -1,13 +0,0 @@
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 DELETED
@@ -1,6 +0,0 @@
1
- {
2
- "extends": "@tsconfig/svelte/tsconfig.json",
3
-
4
- "include": ["src/**/*"],
5
- "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
6
- }