{"mappings":"AACA,cAAc,sBAAiC;AAI/C,SAAS,mBAAkC;;;;;;AAS3C,cA+CM,iBAAiB,YAAY;CACjC,AACA;CAEA,AACA;CAEA,AACA;CAEA,UAAU,UAAU,eAAe;;AAwBrC,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/progress/component.ts"],"sourcesContent":["import { attr, godown, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { isNullable, Ranger } from \"sharekit\";\n\nimport { GlobalStyle, cssGlobalVars } from \"../../internal/global-style.js\";\n\nconst protoName = \"progress\";\n\n/**\n * {@linkcode Progress} similar to `<progress>`.\n *\n * @category feedback\n */\n@godown(protoName)\n@styles(css`\n  :host {\n    width: 100%;\n    height: 0.5em;\n    border-radius: 0.25em;\n    background: var(${cssGlobalVars.passive});\n    color: var(${cssGlobalVars.active});\n  }\n\n  :host,\n  [part=\"root\"] {\n    display: block;\n  }\n\n  [part=\"root\"] {\n    z-index: 1;\n    position: relative;\n    border-radius: inherit;\n    overflow: hidden;\n  }\n\n  [part=\"value\"] {\n    position: absolute;\n    z-index: 2;\n    top: 0;\n    left: 0;\n    height: 100%;\n    border-radius: inherit;\n    transition: all 0.3s;\n    animation: progress 1.8s ease-in-out infinite alternate;\n    background: currentColor;\n  }\n\n  @keyframes progress {\n    from {\n      left: 0;\n    }\n    to {\n      left: 80%;\n    }\n  }\n\n  .static [part=\"value\"] {\n    animation: none;\n  }\n`)\nclass Progress extends GlobalStyle {\n  @property({ type: Number })\n  max = 1;\n\n  @property({ type: Number })\n  min = 0;\n\n  @property({ type: Number })\n  value: number;\n\n  protected render(): TemplateResult<1> {\n    let width = 20;\n    let className: string;\n    if (!isNullable(this.value)) {\n      const ranger = new Ranger(this.min, this.max);\n      const value = +this.value - this.min;\n      width = (value / ranger.diff) * 100;\n      className = \"static\";\n    }\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n        class=\"${className}\"\n      >\n        <i\n          part=\"value\"\n          style=\"width:${width}%;\"\n        ></i>\n      </div>\n    `;\n  }\n}\n\nexport default Progress;\nexport { Progress };\n"],"version":3,"file":"component.d.ts"}