@animaliads/ani-radio - npm Package Compare versions

Comparing version 1.1.0-dev.34 to 1.1.0-dev.35

dist/index.js

@@ -1,2 +0,16 @@
-var e;!function(e){e.medium="medium",e.large="large"}(e||(e={}));class n extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.addEventListener("click",this.onClick)}get checked(){return r(this.getAttribute("checked"))}get disabled(){return r(this.getAttribute("disabled"))}get size(){const n=this.getAttribute("size");return n&&"null"!==n?n:e.medium}static get observedAttributes(){return["checked","disabled","size"]}connectedCallback(){this.render(),this.setDefaultSize()}attributeChangedCallback(){this.render(),this.setDefaultSize()}onClick(e){"false"===this.disabled?this.setAttribute("checked","true"):e.preventDefault()}render(){this.shadow.innerHTML=`\n        <style>\n  * {\n    cursor: pointer;\n  }\n\n  :host {\n    display: inline-block;\n\n    --width-md: 24px;\n    --width-lg: 32px;\n\n    --offset-checked: 6px;\n\n    --circle-width-md: calc(var(--width-md) - 12px);\n    --circle-width-lg: calc(var(--width-lg) - 12px);\n\n    --background-radial-md: radial-gradient(\n      var(--circle-width-md) circle at 10px 10px,\n      var(--color-checked) 50%,\n      transparent 57%\n    );\n\n    --background-radial-lg: radial-gradient(\n      var(--circle-width-lg) circle at 14px 14px,\n      var(--color-checked) 50%,\n      transparent 54.2%\n    );\n\n    --background-radial-md-disabled: radial-gradient(\n      var(--circle-width-md) circle at 10px 10px,\n      var(--color-checked-disabled) 50%,\n      transparent 57%\n    );\n\n    --background-radial-lg-disabled: radial-gradient(\n      var(--circle-width-lg) circle at 14px 14px,\n      var(--color-checked-disabled) 50%,\n      transparent 54.2%\n    );\n  }\n\n  input[type='radio'] {\n    background-color: var(--color-unchecked);\n    border-color: var(--border-color);\n\n    -webkit-appearance: none;\n    appearance: none;\n    border-width: var(--border-width-md);\n    border-style: solid;\n    border-radius: 100%;\n    background-clip: content-box;\n    margin: 0;\n  }\n\n  input[size='medium'] {\n    width: var(--width-md);\n    height: var(--width-md);\n  }\n\n  input[size='large'] {\n    width: var(--width-lg);\n    height: var(--width-lg);\n  }\n\n  input[type='radio']:hover {\n    box-shadow: 0 0 0 var(--border-width-lg) var(--shadow-color-hover);\n    border-color: var(--color-hover);\n  }\n\n  :host([disabled="true"]),\n  :host([disabled="true"]) label,\n  input[type='radio'][disabled],\n  input[type='radio'][disabled] + slot {\n    cursor: not-allowed;\n  }\n\n  input[type='radio'][disabled] {\n    box-shadow: none;\n  }\n\n  input[type='radio']:checked {\n    background: var(--background-radial-md);\n    background-color: var(--color-unchecked);\n    border-color: var(--color-checked);\n    padding: 4px;\n  }\n\n  input[type='radio'][size='large']:checked {\n    background: var(--background-radial-lg);\n    background-color: var(--color-unchecked);\n  }\n\n  input[type='radio'][disabled] {\n    background-color: var(--color-unchecked-disabled);\n    border-color: var(--color-checked-disabled)\n  }\n\n  input[type='radio'][disabled]:checked {\n    background: var(--background-radial-md-disabled);\n    background-color: var(--color-unchecked-disabled);\n  }\n\n  input[type='radio'][disabled][size='large']:checked {\n    background: var(--background-radial-lg-disabled);\n    background-color: var(--color-unchecked-disabled);\n  }\n\n  input[type='radio']:focus-visible {\n    outline-color: var(--outline-color-focused);\n\n    outline-width: var(--border-width-lg);\n    outline-style: solid;\n    outline-offset: 2px;\n  }\n</style>\n        <label>\n          <input\n            type="radio"\n            id="radioElement"\n            size="${this.size}"\n            ${"true"===this.checked?"checked":""}\n            ${"true"===this.disabled?"disabled":""}\n          >\n          <slot></slot>\n        </label>\n    `}setDefaultSize(){const n=Object.values(e).includes(this.getAttribute("size"));this.hasAttribute("size")&&n||this.setAttribute("size",e.medium)}}function r(e){return""===e?"true":null===e?"false":e}customElements.define("ani-radio",n);
+import{Component as e,transformBooleanProperties as n}from"@animaliads/common";
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */var r;!function(e){e.medium="medium",e.large="large"}(r||(r={}));let t=class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.addEventListener("click",this.onClick)}get checked(){const e=this.getAttribute("checked");return n(e)}get disabled(){const e=this.getAttribute("disabled");return n(e)}get size(){const e=this.getAttribute("size");return e&&"null"!==e?e:r.medium}static get observedAttributes(){return["checked","disabled","size"]}connectedCallback(){this.render(),this.setDefaultSize()}attributeChangedCallback(){this.render(),this.setDefaultSize()}onClick(e){"false"===this.disabled?this.setAttribute("checked","true"):e.preventDefault()}render(){this.shadow.innerHTML=`\n        <style>\n  * {\n    cursor: pointer;\n  }\n\n  :host {\n    display: inline-block;\n\n    --width-md: 24px;\n    --width-lg: 32px;\n\n    --offset-checked: 6px;\n\n    --circle-width-md: calc(var(--width-md) - 12px);\n    --circle-width-lg: calc(var(--width-lg) - 12px);\n\n    --background-radial-md: radial-gradient(\n      var(--circle-width-md) circle at 10px 10px,\n      var(--color-checked) 50%,\n      transparent 57%\n    );\n\n    --background-radial-lg: radial-gradient(\n      var(--circle-width-lg) circle at 14px 14px,\n      var(--color-checked) 50%,\n      transparent 54.2%\n    );\n\n    --background-radial-md-disabled: radial-gradient(\n      var(--circle-width-md) circle at 10px 10px,\n      var(--color-checked-disabled) 50%,\n      transparent 57%\n    );\n\n    --background-radial-lg-disabled: radial-gradient(\n      var(--circle-width-lg) circle at 14px 14px,\n      var(--color-checked-disabled) 50%,\n      transparent 54.2%\n    );\n  }\n\n  input[type='radio'] {\n    background-color: var(--color-unchecked);\n    border-color: var(--border-color);\n\n    -webkit-appearance: none;\n    appearance: none;\n    border-width: var(--border-width-md);\n    border-style: solid;\n    border-radius: 100%;\n    background-clip: content-box;\n    margin: 0;\n  }\n\n  input[size='medium'] {\n    width: var(--width-md);\n    height: var(--width-md);\n  }\n\n  input[size='large'] {\n    width: var(--width-lg);\n    height: var(--width-lg);\n  }\n\n  input[type='radio']:hover {\n    box-shadow: 0 0 0 var(--border-width-lg) var(--shadow-color-hover);\n    border-color: var(--color-hover);\n  }\n\n  :host([disabled="true"]),\n  :host([disabled="true"]) label,\n  input[type='radio'][disabled],\n  input[type='radio'][disabled] + slot {\n    cursor: not-allowed;\n  }\n\n  input[type='radio'][disabled] {\n    box-shadow: none;\n  }\n\n  input[type='radio']:checked {\n    background: var(--background-radial-md);\n    background-color: var(--color-unchecked);\n    border-color: var(--color-checked);\n    padding: 4px;\n  }\n\n  input[type='radio'][size='large']:checked {\n    background: var(--background-radial-lg);\n    background-color: var(--color-unchecked);\n  }\n\n  input[type='radio'][disabled] {\n    background-color: var(--color-unchecked-disabled);\n    border-color: var(--color-checked-disabled)\n  }\n\n  input[type='radio'][disabled]:checked {\n    background: var(--background-radial-md-disabled);\n    background-color: var(--color-unchecked-disabled);\n  }\n\n  input[type='radio'][disabled][size='large']:checked {\n    background: var(--background-radial-lg-disabled);\n    background-color: var(--color-unchecked-disabled);\n  }\n\n  input[type='radio']:focus-visible {\n    outline-color: var(--outline-color-focused);\n\n    outline-width: var(--border-width-lg);\n    outline-style: solid;\n    outline-offset: 2px;\n  }\n</style>\n        <label>\n          <input\n            type="radio"\n            id="radioElement"\n            size="${this.size}"\n            ${"true"===this.checked?"checked":""}\n            ${"true"===this.disabled?"disabled":""}\n          >\n          <slot></slot>\n        </label>\n    `}setDefaultSize(){const e=Object.values(r).includes(this.getAttribute("size"));this.hasAttribute("size")&&e||this.setAttribute("size",r.medium)}};t=function(e,n,r,t){var d,i=arguments.length,a=i<3?n:null===t?t=Object.getOwnPropertyDescriptor(n,r):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,n,r,t);else for(var o=e.length-1;o>=0;o--)(d=e[o])&&(a=(i<3?d(a):i>3?d(n,r,a):d(n,r))||a);return i>3&&a&&Object.defineProperty(n,r,a),a}([e("ani-radio")],t);
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@animaliads/ani-radio",
-  "version": "1.1.0-dev.34",
+  "version": "1.1.0-dev.35",
   "description": "Radio do Animalia DS",
@@ -17,5 +17,6 @@ "tag": "dev",
   "module": "dist/index.js",
+  "main": "dist/index.js",
   "scripts": {
     "build": "npx rollup -c",
-    "watch": "npx rollup -c -w"
+    "dev": "npx rollup -c -w"
   },
@@ -31,3 +32,6 @@ "repository": {
   },
-  "gitHead": "b22ccd76c58c6df11531179607a0abea20a2734d"
+  "dependencies": {
+    "@animaliads/common": "^1.1.0-dev.35"
+  },
+  "gitHead": "7e85c007139ef35e71aec00f924d3fe5f805a9c7"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28427

increased by86.95%

Lines of code

58

increased by31.82%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of package files

13

decreased by-13.33%

Dependency changes

• + Added@animaliads/common@^1.1.0-dev.35

• + Added@animaliads/common@1.1.0-dev.45(transitive)