@brickclay-org/ui 0.1.15 → 0.1.16

package/fesm2022/brickclay-org-ui.mjs

@@ -2870,7 +2870,20 @@ class BkRadioButton {
     radioClass = '';
     label = '';
     labelClass = '';
+    /**
+     * The model value represented by this radio option.
+     * Checked when the bound model `=== value`.
+     */
     value;
+    /**
+     * Model value to write when de-selecting this radio (only when `allowDeselect` is true).
+     */
+    uncheckedValue = null;
+    /**
+     * If true, selecting an already-selected radio will clear the model to `uncheckedValue`.
+     * Default false (standard radio behavior).
+     */
+    allowDeselect = false;
     disabled = false;
     variant = 'dot';
     change = new EventEmitter();
@@ -2880,12 +2893,19 @@ class BkRadioButton {
     select() {
         if (this.disabled)
             return;
-        if (this.modelValue !== this.value) {
-            this.modelValue = this.value;
-            this.onChange(this.value);
+        if (this.modelValue === this.value) {
+            if (!this.allowDeselect)
+                return;
+            this.modelValue = this.uncheckedValue;
+            this.onChange(this.uncheckedValue);
             this.onTouched();
-            this.change.emit(this.value);
+            this.change.emit(this.uncheckedValue);
+            return;
         }
+        this.modelValue = this.value;
+        this.onChange(this.value);
+        this.onTouched();
+        this.change.emit(this.value);
     }
     get isChecked() {
         return this.modelValue === this.value;
@@ -2903,17 +2923,17 @@ class BkRadioButton {
         this.disabled = isDisabled;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkRadioButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkRadioButton, isStandalone: true, selector: "bk-radio-button", inputs: { radioClass: "radioClass", label: "label", labelClass: "labelClass", value: "value", disabled: "disabled", variant: "variant" }, outputs: { change: "change" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BkRadioButton, isStandalone: true, selector: "bk-radio-button", inputs: { radioClass: "radioClass", label: "label", labelClass: "labelClass", value: "value", uncheckedValue: "uncheckedValue", allowDeselect: "allowDeselect", disabled: "disabled", variant: "variant" }, outputs: { change: "change" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BkRadioButton),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"select()\"\r\n  (keydown.enter)=\"select()\"\r\n  (keydown.space)=\"$event.preventDefault(); select()\"\r\n  tabindex=\"0\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0 group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 radio\"\r\n    [ngClass]=\"[\r\n    radioClass,\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n      variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n\r\n      variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\r\n\r\n      disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && isChecked && variant === 'dot'  ? 'border-gray-300 bg-gray-50' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n      disabled ? 'cursor-not-allowed' : ''\r\n    ]\"\r\n  >\r\n@if(variant === 'dot'){\r\n    <span\r\n      class=\"rounded-full bg-black transition-transform duration-200 transform dot\"\r\n      [class.scale-0]=\"!isChecked\"\r\n      [class.scale-100]=\"isChecked\"\r\n      [class.bg-gray-400]=\"disabled\"\r\n    ></span>\r\n}\r\n    @if (variant === 'tick'){\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200 tick\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n\r\n    >\r\n      <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n    }\r\n  </div>\r\n\r\n    @if(label) {\r\n  <span class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n        [ngClass]=\"disabled ? 'text-gray-400' : ''\">\r\n    {{ label }}\r\n  </span>\r\n    }\r\n</div>\r\n", styles: [".radio.xsm{@apply size-[14px] min-h-[14px] min-w-[14px];}.radio.sm{@apply size-[16px] min-h-[16px] min-w-[16px];}.radio.md{@apply size-[18px] min-h-[18px] min-w-[18px];}.radio.lg{@apply size-[19px] min-h-[19px] min-w-[19px];}.radio.xsm .dot{@apply size-[6px] min-h-[6px] min-w-[6px];}.radio.sm .dot{@apply size-[8px] min-h-[8px] min-w-[8px];}.radio.md .dot{@apply size-[10px] min-h-[10px] min-w-[10px];}.radio.lg .dot{@apply size-[11px] min-h-[11px] min-w-[11px];}.radio.xsm .tick{@apply size-[9px] min-h-[9px] min-w-[9px];}.radio.sm .tick{@apply size-[10px] min-h-[10px] min-w-[10px];}.radio.md .tick{@apply size-[12px] min-h-[12px] min-w-[12px];}.radio.lg .tick{@apply size-[14px] min-h-[14px] min-w-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"select()\"\r\n  (keydown.enter)=\"select()\"\r\n  (keydown.space)=\"$event.preventDefault(); select()\"\r\n  tabindex=\"0\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center rounded-full border-2 transition-all duration-200 flex-shrink-0 group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2 radio\"\r\n    [ngClass]=\"[\r\n    radioClass,\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n      variant === 'dot' && isChecked && !disabled ? 'border-black bg-white' : '',\r\n\r\n      variant === 'tick' && isChecked && !disabled ? 'bg-black border-black' : '',\r\n\r\n      disabled && isChecked && variant === 'tick' ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && isChecked && variant === 'dot'  ? 'border-gray-300 bg-gray-50' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n      disabled ? 'cursor-not-allowed' : ''\r\n    ]\"\r\n  >\r\n@if(variant === 'dot'){\r\n    <span\r\n      class=\"rounded-full bg-black transition-transform duration-200 transform dot\"\r\n      [class.scale-0]=\"!isChecked\"\r\n      [class.scale-100]=\"isChecked\"\r\n      [class.bg-gray-400]=\"disabled\"\r\n    ></span>\r\n}\r\n    @if (variant === 'tick'){\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200 tick\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n\r\n    >\r\n      <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n    }\r\n  </div>\r\n\r\n    @if(label) {\r\n  <span class=\"font-medium text-xs text-[#1B223A] select-none {{labelClass}}\"\r\n        [ngClass]=\"disabled ? 'text-gray-400' : ''\">\r\n    {{ label }}\r\n  </span>\r\n    }\r\n</div>\r\n", styles: [".radio.xsm{@apply size-[14px] min-h-[14px] min-w-[14px];}.radio.sm{@apply size-[16px] min-h-[16px] min-w-[16px];}.radio.md{@apply size-[18px] min-h-[18px] min-w-[18px];}.radio.lg{@apply size-[19px] min-h-[19px] min-w-[19px];}.radio.xsm .dot{@apply size-[6px] min-h-[6px] min-w-[6px];}.radio.sm .dot{@apply size-[8px] min-h-[8px] min-w-[8px];}.radio.md .dot{@apply size-[10px] min-h-[10px] min-w-[10px];}.radio.lg .dot{@apply size-[11px] min-h-[11px] min-w-[11px];}.radio.xsm .tick{@apply size-[9px] min-h-[9px] min-w-[9px];}.radio.sm .tick{@apply size-[10px] min-h-[10px] min-w-[10px];}.radio.md .tick{@apply size-[12px] min-h-[12px] min-w-[12px];}.radio.lg .tick{@apply size-[14px] min-h-[14px] min-w-[14px];}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BkRadioButton, decorators: [{
             type: Component,
-            args: [{ selector: 'bk-radio-button', standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'bk-radio-button', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => BkRadioButton),
@@ -2928,6 +2948,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], uncheckedValue: [{
+                type: Input
+            }], allowDeselect: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], variant: [{