# plc-input


## class binding and customization
The property class enables custom presets for the individual input types.  
By defining a custom class, you can define a separate style optimized to the desired standards without any interference with the other implementations.  
Guidelines for creating a new class:
- use kebab-case (lower case letters with words separated by hyphens ("-"))
- use plc-\[inputtype\] as prefix if your class is for only one type (e.g. plc-checkbox-my-class for checkboxes) to avoid the class from being used elsewhere
- use plc-input as prefix if you need your class to apply to different types

## css-class API
In the following, the class "my-class" is used as an example class name to show how styles have to be defined in the different types of plc-inputs

### General
```css
.my-class {
    /* applies to div containing all elements
    use this for example to define a fixed overall size */
}

.my-class > input {
    /* applies to all types of plc-input
    use this for generic settings such as display: inline-block; */
}
```

### plc-textbox
```css
.my-class > .plc-textbox {
    /* applies to the textbox (input type="text") */
}

.plc-input-table > .plc-input-copy {
    /* applies to the copy-button, set to "display: none;" to disable */
}
```

### plc-button
```css
.my-class {
    /* div containing all elements */
}

.my-class > .plc-button {
    /* applies to button */ 
}

.my-class > .plc-button-status:checked ~ .plc-button {
    /* applies to button when Value === trueValue */
}
/* add :hover, :active etc respectively */
```


### plc-checkbox
```css
.my-class > .plc-checkbox {
    /* applies to checkbox */ 
}

.my-class > .plc-checkbox-label {
    /* applies to label after checkbox */ 
}

.my-class > .plc-checkbox:checked {
    /* applies to checkbox only when checked */ 
}

.my-class > .plc-checkbox:checked ~ .plc-checkbox-label {
    /* applies to label only when checkbox is checked */ 
}
```

### plc-radio
Do not create multiple radio-buttons with the same value, because only one can be active at a time (thus, the previous ones will be deactivated when the next one is activated)

```css
.my-class > .plc-radio {
    /* applies to all radio buttons */
}
.my-class > .plc-radio-label {
    /* applies to the labels next to the radio-buttons */
}

.my-class > .plc-radio:checked {
    /* applies to the checked radio button */
}
.my-class > .plc-radio:checked + .plc-radio-label {
    /* applies to the label directly after the checked radio button */
}
```

### plc-state
```css
.my-class > .plc-state {
     /* applies to the state display */ 
}
.my-class > .plc-state-message {
     /* applies to the message container after the display */
}

.my-class > .plc-state-blinker:checked ~ .plc-state {
     /* applies to the state display if the blinker is active */
}
.my-class > .plc-state-blinker:checked ~ .plc-state-message {
     /* applies to the message container if the blinker is active */ 
}
```