Feature/rchaplin/lwb 264/specific attributes all components (#265)

* LWB-264 Adding specific attributes to Demarcation components <del> and <ins>

* LWB-264 General code cleanup

* LWB-264 Adding specific attributes to Embeded components

* LWB-264 updating embeded components tests

* LWB-264 Adding specific attributes to the SvgMathMl components

* LWB-264 Adding specific attributes to the Scripting components

* LWB-264 Adding specific attributes to the Table components

* LWB-264 Adding specific attributes to most Form components

* LWB-264 Adding all of the Input types as individual components

* LWB-264 Major overhaul for attribute trait structuring

* LWB-264 Adjust MaxlengthMinLength to use integers as the 2 property types.

* LWB-264 Fixing the FormRelatedAttributes Trait logic

* LWB-264 Fixing doc blocks for ListAttribute Trait

* LWB-264 Fixing doc blocks for AutocompleteAttribute Trait

* LWB-264 Adjusting Iframe component to use the DimensionalAttributes trait

* LWB-264 adding in src attribute assignment for Iframe component

* LWB-264 Adjusting type logic for the Button Component

* LWB-264 Fixing docblocks for Text, Tel, and Url components

* LWB-264 Adding DimensionalAttributes Trait usage for the MEter Component

* LWB-264 Adding DimensionalAttributes Trait usage for the Canvas Component

resources/views/demarcation/del.blade.php

@@ -1,3 +1,3 @@
-<del {!! $globalAttributes !!}>
+<del {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </del>

resources/views/demarcation/ins.blade.php

@@ -1,3 +1,3 @@
-<ins {!! $globalAttributes !!}>
+<ins {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </ins>

resources/views/embedded_content/embed.blade.php

@@ -1,3 +1,3 @@
-<embed {!! $globalAttributes !!}>
+<embed {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </embed>

resources/views/embedded_content/iframe.blade.php

@@ -1,3 +1,3 @@
-<iframe {!! $globalAttributes !!}>
+<iframe {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </iframe>

resources/views/embedded_content/portal.blade.php

@@ -1,3 +1,3 @@
-<portal {!! $globalAttributes !!}>
+<portal {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </portal>

resources/views/embedded_content/source.blade.php

@@ -1,3 +1 @@
-<source {!! $globalAttributes !!}>
-    {{ $slot }}
-</source>
+<source {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/button.blade.php

@@ -1,3 +1,3 @@
-<button {!! $globalAttributes !!}>
+<button {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </button>

resources/views/forms/fieldset.blade.php

@@ -1,3 +1,3 @@
-<fieldset {!! $globalAttributes !!}>
+<fieldset {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </fieldset>

resources/views/forms/form.blade.php

@@ -1,3 +1,3 @@
-<form {!! $globalAttributes !!}>
+<form {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </form>

resources/views/forms/input.blade.php

@@ -1,3 +1,3 @@
-<input {!! $globalAttributes !!}>
+<input {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </input>

resources/views/forms/inputs/button.blade.php

@@ -0,0 +1 @@
+<input type="button" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/checkbox.blade.php

@@ -0,0 +1 @@
+<input type="checkbox" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/color.blade.php

@@ -0,0 +1 @@
+<input type="color" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/date.blade.php

@@ -0,0 +1 @@
+<input type="date" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/datetimelocal.blade.php

@@ -0,0 +1 @@
+<input type="datetimelocal" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/email.blade.php

@@ -0,0 +1 @@
+<input type="email" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/file.blade.php

@@ -0,0 +1 @@
+<input type="file" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/hidden.blade.php

@@ -0,0 +1 @@
+<input type="hidden" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/image.blade.php

@@ -0,0 +1 @@
+<input type="image" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/month.blade.php

@@ -0,0 +1 @@
+<input type="month" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/number.blade.php

@@ -0,0 +1 @@
+<input type="number" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/password.blade.php

@@ -0,0 +1 @@
+<input type="password" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/radio.blade.php

@@ -0,0 +1 @@
+<input type="radio" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/range.blade.php

@@ -0,0 +1 @@
+<input type="range" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/reset.blade.php

@@ -0,0 +1 @@
+<input type="reset" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/search.blade.php

@@ -0,0 +1 @@
+<input type="search" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/submit.blade.php

@@ -0,0 +1 @@
+<input type="submit" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/tel.blade.php

@@ -0,0 +1 @@
+<input type="tel" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/text.blade.php

@@ -0,0 +1 @@
+<input type="text" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/time.blade.php

@@ -0,0 +1 @@
+<input type="time" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/url.blade.php

@@ -0,0 +1 @@
+<input type="url" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/inputs/week.blade.php

@@ -0,0 +1 @@
+<input type="week" {!! $globalAttributes !!} {!! $specificAttributes !!}>

resources/views/forms/label.blade.php

@@ -1,3 +1,3 @@
-<label {!! $globalAttributes !!}>
+<label {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </label>

resources/views/forms/meter.blade.php

@@ -1,3 +1,3 @@
-<meter {!! $globalAttributes !!}>
+<meter {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </meter>

resources/views/forms/optgroup.blade.php

@@ -1,3 +1,3 @@
-<optgroup {!! $globalAttributes !!}>
+<optgroup {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </optgroup>

resources/views/forms/option.blade.php

@@ -1,3 +1,3 @@
-<option {!! $globalAttributes !!}>
+<option {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </option>

resources/views/forms/output.blade.php

@@ -1,3 +1,3 @@
-<output {!! $globalAttributes !!}>
+<output {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </output>

resources/views/forms/progress.blade.php

@@ -1,3 +1,3 @@
-<progress {!! $globalAttributes !!}>
+<progress {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </progress>

resources/views/forms/select.blade.php

@@ -1,3 +1,3 @@
-<select {!! $globalAttributes !!}>
+<select {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </select>

resources/views/scripting/canvas.blade.php

@@ -1,3 +1,3 @@
-<canvas {!! $globalAttributes !!}>
+<canvas {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </canvas>

resources/views/scripting/script.blade.php

@@ -1,3 +1,3 @@
-<script {!! $globalAttributes !!}>
+<script {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </script>

resources/views/svg_math_ml/math.blade.php

@@ -1,3 +1,3 @@
-<math {!! $globalAttributes !!}>
+<math {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </math>

resources/views/svg_math_ml/svg.blade.php

@@ -1,3 +1,3 @@
-<svg {!! $globalAttributes !!}>
+<svg {!! $specificAttributes !!}>
     {{ $slot }}
 </svg>

resources/views/table_content/col.blade.php

@@ -1,3 +1,3 @@
-<col {!! $globalAttributes !!}>
+<col {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </col>

resources/views/table_content/colgroup.blade.php

@@ -1,3 +1,3 @@
-<colgroup {!! $globalAttributes !!}>
+<colgroup {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </colgroup>

resources/views/table_content/td.blade.php

@@ -1,3 +1,3 @@
-<td {!! $globalAttributes !!}>
+<td {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </td>

resources/views/table_content/th.blade.php

@@ -1,3 +1,3 @@
-<th {!! $globalAttributes !!}>
+<th {!! $globalAttributes !!} {!! $specificAttributes !!}>
     {{ $slot }}
 </th>

src/Components/AttributeTraits/AltAttribute.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace T73biz\LwBits\Components\AttributeTraits;
+
+use Livewire\Features\SupportAttributes\AttributeCollection;
+
+trait AltAttribute
+{
+    /**
+     * A text description of the resource. This is a required attribute for accessibility and is used by screen readers.
+     */
+    public string $alt = '';
+
+    /**
+     * Set the alt attribute
+     *
+     * @throws \T73biz\LwBits\Exceptions\InvalidAttributeException
+     */
+    public function setAltAttribute(AttributeCollection &$specificAttributes): void
+    {
+        if (empty($this->alt)) {
+            throw new \T73biz\LwBits\Exceptions\InvalidAttributeException('The alt attribute is required for accessibility and must be set.');
+        }
+        $specificAttributes->add(['alt' => $this->alt]);
+    }
+}

src/Components/AttributeTraits/AutocompleteAttribute.php

@@ -0,0 +1,119 @@
+<?php
+
+namespace T73biz\LwBits\Components\AttributeTraits;
+
+use Livewire\Features\SupportAttributes\AttributeCollection;
+use T73biz\LwBits\Exceptions\InvalidAttributeException;
+
+trait AutocompleteAttribute
+{
+    /**
+     * The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide
+     * automated assistance in filling out form field values, as well as guidance to the browser as to the type of
+     * information expected in the field.
+     *
+     * It is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select>
+     * elements, and <form> elements.
+     */
+    public string $autocomplete = '';
+
+    /**
+     * Set the autocomplete attribute.
+     *
+     * @throws \T73biz\LwBits\Exceptions\InvalidAttributeException
+     */
+    public function setAutocompleteAttribute(AttributeCollection &$specificAttributes): void
+    {
+        /**
+         * Possible Values:
+         * - off: The browser is not allowed to automatically complete the input. Note: It can't prevent a password
+         *        manager from asking the user if they want to save username and password information.
+         * - on: The browser is allowed to automatically complete the input with no guidance as to the type of data
+         *       expected.
+         * - <token-list>: An ordered set of space-separated tokens consisting of autofill detail tokens.
+         *
+         * If the autocomplete attribute is <token-list>, each token is the string "section-", case-insensitive,
+         * followed by the rest of the token. All form controls with the same token belong to the named group.
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
+         */
+        $allowedValues = [
+            'name',
+            'honorific-prefix',
+            'given-name',
+            'additional-name',
+            'family-name',
+            'honorific-suffix',
+            'nickname',
+            'email',
+            'username',
+            'new-password',
+            'current-password',
+            'one-time-code',
+            'organization-title',
+            'organization',
+            'street-address',
+            'shipping',
+            'billing',
+            'address-line1',
+            'address-line2',
+            'address-line3',
+            'address-level4',
+            'address-level3',
+            'address-level2',
+            'address-level1',
+            'country',
+            'country-name',
+            'postal-code',
+            'cc-name',
+            'cc-given-name',
+            'cc-additional-name',
+            'cc-family-name',
+            'cc-number',
+            'cc-exp',
+            'cc-exp-month',
+            'cc-exp-year',
+            'cc-csc',
+            'cc-type',
+            'transaction-currency',
+            'transaction-amount',
+            'language',
+            'bday',
+            'bday-day',
+            'bday-month',
+            'bday-year',
+            'sex',
+            'tel',
+            'tel-country-code',
+            'tel-national',
+            'tel-area-code',
+            'tel-local',
+            'tel-extension',
+            'impp',
+            'url',
+            'photo',
+            'webauthn',
+        ];
+        if (! empty($this->autocomplete)) {
+            if (in_array($this->autocomplete, ['on', 'off'])) {
+                $specificAttributes->add(['autocomplete' => $this->autocomplete]);
+
+                return;
+            } else {
+                $valueParts = explode(' ', $this->autocomplete);
+
+                foreach ($valueParts as $key => $valuePart) {
+                    if (str_starts_with($valuePart, 'section-') && $key !== 0) {
+                        throw new InvalidAttributeException(
+                            'The autocomplete attribute value is invalid. The section token must be the first token.'
+                        );
+                    } elseif (! in_array($valuePart, $allowedValues) && ! str_starts_with($valuePart, 'section-')) {
+                        throw new InvalidAttributeException('The autocomplete attribute value is invalid.');
+                    }
+                }
+            }
+
+            $specificAttributes->add(['autocomplete' => $this->autocomplete]);
+        }
+    }
+}

src/Components/AttributeTraits/CheckedAttribute.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace T73biz\LwBits\Components\AttributeTraits;
+
+use Livewire\Features\SupportAttributes\AttributeCollection;
+
+trait CheckedAttribute
+{
+    /**
+     * Valid for both radio and checkbox types, checked is a Boolean attribute. If present on a radio type, it indicates
+     * that the radio button is the currently selected one in the group of same-named radio buttons. If present on a
+     * checkbox type, it indicates that the checkbox is checked by default (when the page loads). It does not indicate
+     * whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not
+     * reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)
+     *
+     * Note:
+     * Unlike other input controls, a checkboxes and radio buttons value are only included in the submitted data
+     * if they are currently checked. If they are, the name and the value(s) of the checked controls are submitted.
+     *
+     * For example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data
+     * submitted will include fruit=cherry. If the checkbox isn't active, it isn't listed in the form data at all. The
+     * default value for checkboxes and radio buttons is on.
+     */
+    public bool $checked = false;
+
+    /**
+     * Set the checked attribute.
+     */
+    public function setCheckedAttribute(AttributeCollection $specificAttributes): void
+    {
+        if ($this->checked) {
+            $specificAttributes->add(['checked']);
+        }
+    }
+}

src/Components/AttributeTraits/DimensionalAttributes.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace T73biz\LwBits\Components\AttributeTraits;
+
+use Livewire\Features\SupportAttributes\AttributeCollection;
+
+trait DimensionalAttributes
+{
+    /**
+     * The displayed height of the resource, in CSS pixels. This must be an absolute value; percentages are not allowed.
+     */
+    public int $height = 0;
+
+    /**
+     * The displayed width of the resource, in CSS pixels. This must be an absolute value; percentages are not allowed.
+     */
+    public int $width = 0;
+
+    /**
+     * Set the dimensional attributes
+     */
+    public function setDimensionalAttributes(AttributeCollection &$specificAttributes): void
+    {
+        if ($this->height > 0) {
+            $specificAttributes->add(['height' => $this->height]);
+        }
+        if ($this->width > 0) {
+            $specificAttributes->add(['width' => $this->width]);
+        }
+    }
+}