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

package/src/GeneralIconProgressRing.svelte

@@ -1,195 +0,0 @@
-<svelte:options tag={null} />
-<script lang="ts">
-  import {onMount} from "svelte";
-
-  export let currentstep:number=0;
-  export let livecolor:string='#00AEEF'; //expired:#C4C4C4
-  export let expiredcolor = '#C4C4C4';
-  export let status:string='true';
-
-  let widthinpx:number=100;
-  let totalWidth75,halfOfProgressBarRing,totalWidth61;
-  let progressRingWidth,innerSectionWidth,innerSectionLeft;
-  let percentSectionWidth,percentSectionLeft;
-  let leftRotateSectionWidth, leftRotateSectionAfterWidth;
-  let leftRotateDeg,rightRotateDeg;
-  let progressElement, progresscolor;
-
-  const setCssVariables=(node, variables)=> {
-    for (const name in variables) {
-      node.style.setProperty(`--${name}`, variables[name]);
-    }
-  }
-  const cssVariables=(node, variables)=> {
-    setCssVariables(node, variables);
-    return {
-      update(variables) {
-        setCssVariables(node, variables);
-      }
-    }
-  }
-  const initProgress = ()=>{
-    if(status == 'true'){
-      progresscolor = livecolor;
-    }else{
-      progresscolor = expiredcolor;
-    }
-
-    totalWidth75 = widthinpx * 0.74;
-    halfOfProgressBarRing = (widthinpx - totalWidth75)/2;
-    totalWidth61 = widthinpx * 0.70;
-
-    progressRingWidth = `${widthinpx}px`;
-    innerSectionWidth = `${totalWidth75}px`;
-    innerSectionLeft = `${halfOfProgressBarRing}px`;
-    //percent
-    percentSectionWidth = `${totalWidth61}px`;
-    percentSectionLeft = `${(totalWidth75 - totalWidth61) /2}px`;
-    //rotate part
-    leftRotateSectionWidth = `${widthinpx/2}px`;
-    leftRotateSectionAfterWidth = `${widthinpx/2 + 1}px`;
-
-    cssVariables(progressElement, {progressRingWidth, innerSectionWidth, innerSectionLeft, progresscolor,
-      percentSectionWidth, percentSectionLeft,  leftRotateSectionWidth,leftRotateSectionAfterWidth});
-  }
-  const resetProgressByValue=()=>{
-    if(!progressElement)return;
-    leftRotateDeg = '0deg';
-    rightRotateDeg = '0deg';
-    if(currentstep > 100){
-      currentstep = 100;
-      leftRotateDeg = '360deg';
-    }else{
-      if(currentstep >= 50){
-        let deg = (currentstep - 50)/50 * 180 + 180;
-        leftRotateDeg = `${deg}deg`;
-        rightRotateDeg = '0deg';
-      }else {
-        leftRotateDeg = '180deg';
-        rightRotateDeg = `${ (currentstep)/50 * 180 - 180}deg`;
-      }
-    }
-    cssVariables(progressElement, {rightRotateDeg, leftRotateDeg});
-  }
-  onMount(()=>{
-    if(progressElement.offsetWidth == 0){
-      return;
-    }
-    let width = progressElement.offsetWidth;
-    let height = progressElement.offsetHeight;
-    widthinpx = width > height && width*height > 0 ? height || 100 : width || 100;
-    initProgress();
-  });
-  //$:currentstep && livecolor && expiredcolor && status && initProgress();
-  $:currentstep && resetProgressByValue();
-  $:status && resetProgressByValue();
-</script>
-<div class="general-icon-progress-ring Progress" part="ProgressRing"  bind:this={progressElement}>
-  <div class="Left" part="Progress Left"></div><div class="Right" part="Progress Right"></div>
-  <div class="InnerSection" part="Progress InnerSection"><div class="Percent" part="Progress Percent">{currentstep}%</div></div>
-</div>
-<style lang="scss">
-
-
-  *,
-  *::before,
-  *::after {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    text-decoration: none;
-    outline: none;
-    box-sizing: border-box;
-  }
-
-  .general-icon-progress-ring {
-    background: var(--emfe-w-color-black, #000000);
-    color: var(--emfe-w-color-white, #FFFFFF);
-  }
-
-  .Progress {
-    margin: auto;
-    width: var(--progressRingWidth);
-    height: var(--progressRingWidth);
-    position: relative;
-  }
-
-  .Progress .InnerSection {
-    position: absolute;
-    width: var(--innerSectionWidth);
-    height: var(--innerSectionWidth);
-    background-color: white;
-    border-radius: 50%;
-    left: var(--innerSectionLeft, 1rem);
-    top: var(--innerSectionLeft, 1rem);
-    line-height: var(--innerSectionWidth);
-    text-align: center;
-  }
-  .Progress .InnerSection .Percent{
-    background-color: var(--progresscolor);
-    border-radius: 50%;
-    width: var(--percentSectionWidth);
-    height: var(--percentSectionWidth);
-    position: absolute;
-    left: var(--percentSectionLeft, 0.1rem);
-    top: var(--percentSectionLeft, 0.1rem);
-  }
-
-  .Left,
-  .Right {
-    width: var(--leftRotateSectionWidth);
-    height: var(--progressRingWidth);
-    overflow: hidden;
-    position: relative;
-    float: left;
-    background-color: #F2F4F6
-  }
-
-  .Left {
-    border-radius: 0;
-    border-top-left-radius: var(--progressRingWidth);
-    border-bottom-left-radius: var(--progressRingWidth);
-  }
-
-  .Right {
-    border-radius: 0;
-    border-top-right-radius: var(--progressRingWidth);
-    border-bottom-right-radius: var(--progressRingWidth);
-  }
-
-
-  .Left:after,.Right:after {
-    content: "";
-    position: absolute;
-    display: block;
-    width: var(--leftRotateSectionAfterWidth);
-    height: var(--progressRingWidth, 8em);
-    background-color: white;
-    border-radius: 0;
-    border-top-left-radius: var(--progressRingWidth);
-    border-bottom-left-radius: var(--progressRingWidth);
-    background-color: var(--progresscolor);
-
-    transition-property: transform;
-    transition-duration: 1.1s;
-    transition-timing-function: cubic-bezier(.43,0.8,.95,.88);
-    transition-delay: 0.5s;
-  }
-
-  .Right:after {
-    content: "";
-    position: absolute;
-    display: block;
-    border-radius: 0 ;
-    border-top-right-radius: var(--widthInPx);
-    border-bottom-right-radius: var(--widthInPx);
-  }
-  .Left:after {
-    transform-origin: right center;
-    transform: rotateZ(var(--leftRotateDeg, 180deg));
-  }
-  .Right:after {
-    transform-origin: left center;
-    transform: rotateZ(var(--rightRotateDeg, 0deg));
-  }
-</style>

package/src/index.ts

@@ -1,4 +0,0 @@
-import GeneralIconProgressRing from './GeneralIconProgressRing.svelte';
-
-!customElements.get('general-icon-progress-ring') && customElements.define('general-icon-progress-ring', GeneralIconProgressRing);
-export default GeneralIconProgressRing;

package/stories/GeneralIconProgressRing.stories.js

@@ -1,13 +0,0 @@
-import { html } from 'lit-element';
-
-import GeneralIconProgressRing from '../src/GeneralIconProgressRing';
-
-// This default export determines where your story goes in the story list
-export default {
-  title: 'GeneralIconProgressRing',
-};
-
-// 👇 We create a “template” of how args map to rendering
-const GeneralIconProgressRing = ({ aProperty }) => html`<general-icon-progress-ring></general-icon-progress-ring>`;
-
-export const FirstStory = GeneralIconProgressRing.bind({});

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "@tsconfig/svelte/tsconfig.json",
-
-  "include": ["src/**/*"],
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
-}