Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@plcmp/pl-checkbox

Package Overview
Dependencies
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@plcmp/pl-checkbox - npm Package Compare versions

Comparing version
0.1.8
 to
0.1.9
+1
-1
package.json
{
"name": "@plcmp/pl-checkbox",
"version": "0.1.8",
"version": "0.1.9",
"description": "Simple checkbox component.",

@@ -5,0 +5,0 @@ "main": "pl-checkbox.js",

+22
-31
pl-checkbox.js
import { PlElement, html, css } from "polylib";
import "@plcmp/pl-labeled-container";

@@ -8,3 +7,3 @@

label: { type: String },
orientation: { type: String },
orientation: { type: String, reflectToAttribute: true },

@@ -34,6 +33,9 @@ caption: { type: String },

cursor: not-allowed;
pointer-events: none;
user-select: none;
}
:host([disabled]) .checkbox-container {
pointer-events: none;
}
:host([disabled]) .caption{

@@ -43,30 +45,10 @@ color: var(--grey-dark);

:host([disabled]) .checkbox{
background: var(--grey-light);
border: 1px solid transparent;
:host([readonly]) {
pointer-events: none;
}
:host([disabled]) .checkbox.indeterminate:after {
display: block;
content: '';
background: var(--grey-dark);
width: 8px;
height: 2px;
position: absolute;
top: 6px;
left: 3px;
:host([orientation="vertical"]) .checkbox-container {
height: auto;
}
:host([disabled]) .checkbox.checked{
background: var(--grey-light);
background-repeat: no-repeat;
background-position: center;
border: none;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"%3E%3Cpath d="M1 4.5L3 7L7.5 1" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
}
:host([readonly]) {
pointer-events: none;
}
.checkbox-container {

@@ -94,3 +76,4 @@ display: flex;

align-self: center;
background: var(--background-color);
background-color: var(--background-color);
transition: background .3s ease-in-out;
flex-shrink: 0;

@@ -105,3 +88,3 @@ }

background: var(--primary-base);
border: none;
border: 1px solid var(--primary-base);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"%3E%3Cpath d="M1 4.5L3 7L7.5 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');

@@ -112,6 +95,14 @@ background-repeat: no-repeat;

:host([disabled]) .checkbox[state=checked] {
background: var(--grey-light);
border: 1px solid var(--grey-light);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"%3E%3Cpath d="M1 4.5L3 7L7.5 1" stroke="%23AFB3C1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
}
.checkbox[state=checked]:hover {
background: var(--primary-dark);
border: none;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="9" height="8" viewBox="0 0 9 8" fill="none"%3E%3Cpath d="M1 4.5L3 7L7.5 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
border: 1px solid var(--primary-dark);
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"%3E%3Cpath d="M1 4.5L3 7L7.5 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
background-repeat: no-repeat;

@@ -118,0 +109,0 @@ background-position: center;