@everymatrix/general-icon-progress-bar 1.44.0 → 1.45.0

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