@operato/input 2.0.0-alpha.13 → 2.0.0-alpha.134

package/CHANGELOG.md

@@ -3,6 +3,387 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-alpha.134](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.133...v2.0.0-alpha.134) (2024-05-13)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.133](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.132...v2.0.0-alpha.133) (2024-05-12)
+
+
+### :rocket: New Features
+
+* add personalization for ox-filter-form-base ([c60874c](https://github.com/hatiolab/operato/commit/c60874c9f3f6ca2ef68f81d62cd3781fd62074fe))
+
+
+
+## [2.0.0-alpha.129](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.128...v2.0.0-alpha.129) (2024-05-08)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.124](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.123...v2.0.0-alpha.124) (2024-05-08)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.123](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.122...v2.0.0-alpha.123) (2024-05-07)
+
+
+### :rocket: New Features
+
+* ox-zoomable-image ([dbeb528](https://github.com/hatiolab/operato/commit/dbeb528ca4d2afcef0ac6b365bb3c02b286211f9))
+
+
+
+## [2.0.0-alpha.122](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.121...v2.0.0-alpha.122) (2024-05-06)
+
+
+### :bug: Bug Fix
+
+* ox-input-select-button ([1e1be72](https://github.com/hatiolab/operato/commit/1e1be72dcb5d5d23e2d0df0701b0da04855e73d2))
+
+
+
+## [2.0.0-alpha.120](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.119...v2.0.0-alpha.120) (2024-05-05)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.118](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.117...v2.0.0-alpha.118) (2024-05-04)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.116](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.115...v2.0.0-alpha.116) (2024-05-04)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.114](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.113...v2.0.0-alpha.114) (2024-05-04)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.111](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.110...v2.0.0-alpha.111) (2024-05-02)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.107](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.106...v2.0.0-alpha.107) (2024-05-01)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.102](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.101...v2.0.0-alpha.102) (2024-04-22)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.98](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.97...v2.0.0-alpha.98) (2024-04-21)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.94](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.93...v2.0.0-alpha.94) (2024-04-20)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.92](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.91...v2.0.0-alpha.92) (2024-04-19)
+
+
+### :bug: Bug Fix
+
+* common styles for grist ([6683ec7](https://github.com/hatiolab/operato/commit/6683ec7b21515b49d43420e6a5ef890ff882a96b))
+
+
+
+## [2.0.0-alpha.90](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.89...v2.0.0-alpha.90) (2024-04-18)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.89](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.88...v2.0.0-alpha.89) (2024-04-18)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.87](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.86...v2.0.0-alpha.87) (2024-04-17)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.85](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.84...v2.0.0-alpha.85) (2024-04-16)
+
+
+### :bug: Bug Fix
+
+* tweak filters-form style ([6fb293d](https://github.com/hatiolab/operato/commit/6fb293d7d34ea7b01b3011264f554158beb62621))
+
+
+
+## [2.0.0-alpha.82](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.81...v2.0.0-alpha.82) (2024-04-15)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.81](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.80...v2.0.0-alpha.81) (2024-04-15)
+
+
+### :bug: Bug Fix
+
+* use button-container styles ([bd91be3](https://github.com/hatiolab/operato/commit/bd91be3eaf5337a0ffe8cfc3b37191b6427ce5f6))
+
+
+
+## [2.0.0-alpha.80](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.79...v2.0.0-alpha.80) (2024-04-15)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.68](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.67...v2.0.0-alpha.68) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([2bc13f2](https://github.com/hatiolab/operato/commit/2bc13f285f257782f73e5d7b5d1ddd197df85393))
+
+
+
+## [2.0.0-alpha.64](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.63...v2.0.0-alpha.64) (2024-04-13)
+
+
+### :bug: Bug Fix
+
+* mwc=>md for context ([269d5fe](https://github.com/hatiolab/operato/commit/269d5fedca38096ce41850afe88a17ed1fd656dd))
+
+
+
+## [2.0.0-alpha.62](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.61...v2.0.0-alpha.62) (2024-04-12)
+
+
+### :bug: Bug Fix
+
+* change the labels of ox-input-mass-fraction ([3165762](https://github.com/hatiolab/operato/commit/31657626acca7f4412ab02549e8c2de0fb25fcec))
+* mwc=>md for context ([464c406](https://github.com/hatiolab/operato/commit/464c4067415805c0199b8a17e966b5c71ea833ec))
+* mwc=>md for context ([6b88ef7](https://github.com/hatiolab/operato/commit/6b88ef7bed215f64415ccdd44d2603bc893e573d))
+
+
+
+## [2.0.0-alpha.59](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.58...v2.0.0-alpha.59) (2024-04-11)
+
+
+### :bug: Bug Fix
+
+* add show-line-numbers option for ox-input-code ([0d63b0b](https://github.com/hatiolab/operato/commit/0d63b0b80ae6833fa9b37037c2f40394adfd3c27))
+
+
+
+## [2.0.0-alpha.57](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2024-04-07)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.52](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.51...v2.0.0-alpha.52) (2024-03-29)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.51](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.50...v2.0.0-alpha.51) (2024-03-29)
+
+
+### :bug: Bug Fix
+
+* upgrade lit ([e661c33](https://github.com/hatiolab/operato/commit/e661c333d2bb97f784b5ac2c0e365714ee5e80ff))
+
+
+
+## [2.0.0-alpha.49](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.48...v2.0.0-alpha.49) (2024-03-28)
+
+
+### :bug: Bug Fix
+
+* i18n label ([fd48ef2](https://github.com/hatiolab/operato/commit/fd48ef2bd9bde7846a032fed5d34283fbb27a065))
+
+
+
+## [2.0.0-alpha.48](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.47...v2.0.0-alpha.48) (2024-03-28)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.47](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.46...v2.0.0-alpha.47) (2024-03-27)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.35](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.34...v2.0.0-alpha.35) (2024-03-13)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [2.0.0-alpha.34](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.33...v2.0.0-alpha.34) (2024-03-12)
+
+
+### :bug: Bug Fix
+
+* multilingual common-code ([80ca17f](https://github.com/hatiolab/operato/commit/80ca17f32f87808d78ac23ff2737584d6ac8098e))
+
+
+
+## [2.0.0-alpha.32](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.31...v2.0.0-alpha.32) (2024-03-12)
+
+
+### :bug: Bug Fix
+
+* multilingual common-code ([184bcd9](https://github.com/hatiolab/operato/commit/184bcd9ce23ead50e46d9b6cc7bf6788e63b6e21))
+
+
+
+## [2.0.0-alpha.31](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.30...v2.0.0-alpha.31) (2024-03-03)
+
+
+### :bug: Bug Fix
+
+* revert ox-input-data min-width style ([f4edc49](https://github.com/hatiolab/operato/commit/f4edc49f4e8609fce1203fab9838f5b490573ee1))
+
+
+
+## [2.0.0-alpha.30](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.29...v2.0.0-alpha.30) (2024-03-03)
+
+
+### :bug: Bug Fix
+
+* upgrade cm6-graphql ([ec4bc9f](https://github.com/hatiolab/operato/commit/ec4bc9fdf7df0f7d698abc30c4de88c77d8119bf))
+
+
+
+## [2.0.0-alpha.28](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.27...v2.0.0-alpha.28) (2024-02-20)
+
+
+### :bug: Bug Fix
+
+* upgrade devDependencies for webcomponents ([1489b8b](https://github.com/hatiolab/operato/commit/1489b8b790d9bcee779a070a630697f25c01728f))
+
+
+
+## [2.0.0-alpha.20](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.19...v2.0.0-alpha.20) (2024-02-05)
+
+
+### :bug: Bug Fix
+
+* bug on ox-input-data ([6d17bc2](https://github.com/hatiolab/operato/commit/6d17bc26d8320b2aa393825ed3264df40ad5624c))
+
+
+
+## [2.0.0-alpha.19](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.18...v2.0.0-alpha.19) (2024-02-05)
+
+
+### :bug: Bug Fix
+
+* bug on ox-input-data ([3893ad1](https://github.com/hatiolab/operato/commit/3893ad1a900befde2d68b875063461ae60307c5a))
+
+
+
 ## [2.0.0-alpha.13](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2024-01-28)
 
 

package/demo/index-multiple-colors.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -9,7 +9,19 @@
     </style>
     <link href="/themes/app-theme.css" rel="stylesheet" />
     <link href="/themes/input-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
   </head>
   <body>

package/demo/index-partition-keys.html

@@ -1,9 +1,20 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
     <link href="/themes/app-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <form id="demo"></form>

package/demo/index-select.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -33,7 +33,18 @@
     </style>
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <form id="demo"></form>
@@ -67,9 +78,9 @@
           </ox-select>
           
           <ox-select name="multiple" @change=${onchanged} placeholder="multiple select" .value=${[
-          'B',
-          'TOO LONG VALUE'
-        ]}>
+            'B',
+            'TOO LONG VALUE'
+          ]}>
             <ox-popup-list multiple  with-search>
               <div option value="A">A</div>
               <div option value="B">B</div>
@@ -79,10 +90,10 @@
           </ox-select>
 
           <ox-select name="multiple with checkbox" @change=${onchanged} placeholder="multiple with checkbox" .value=${[
-          'B',
-          'C',
-          'F'
-        ]}>
+            'B',
+            'C',
+            'F'
+          ]}>
             <ox-popup-list attr-selected="checked" multiple with-search>
               <ox-checkbox option @change=${e => {
                 const options = e.target.parentElement.querySelectorAll('[option]')

package/demo/index-table.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -11,7 +11,18 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations-next-lite.min.js"></script>
 
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <form id="demo"></form>

package/demo/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
@@ -14,7 +14,18 @@
     </style>
     <link href="/themes/app-theme.css" rel="stylesheet" />
     <link href="/themes/input-theme.css" rel="stylesheet" />
-    <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <a href="./index-3dish.html">3dish</a>

package/dist/src/locale/locale-picker.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
 export declare class LocalePicker extends LitElement {
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     localeChanged(event: Event): void;
 }

package/dist/src/ox-buttons-radio.d.ts

@@ -22,7 +22,7 @@ export declare class PropertyButtonsRadio extends OxFormField {
     value: Object | null;
     mandatory: boolean;
     _slotObserver: MutationObserver;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changes: PropertyValues<this>): void;

package/dist/src/ox-checkbox.d.ts

@@ -7,13 +7,14 @@ export declare class OxCheckbox extends OxFormField {
     checked: boolean | undefined;
     indeterminatable: boolean;
     indeterminate: boolean;
+    left: boolean;
     _hasInner: boolean;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     connectedCallback(): void;
     onClick(): void;
-    get checkedIcon(): import("lit").TemplateResult<1>;
-    get uncheckedIcon(): import("lit").TemplateResult<1>;
-    get indeterminateIcon(): import("lit").TemplateResult<1>;
+    get checkedIcon(): import("lit-html").TemplateResult<1>;
+    get uncheckedIcon(): import("lit-html").TemplateResult<1>;
+    get indeterminateIcon(): import("lit-html").TemplateResult<1>;
     onKeyDown(e: KeyboardEvent): void;
     protected appendFormData({ formData }: FormDataEvent): void;
 }

package/dist/src/ox-checkbox.js

@@ -14,16 +14,15 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
         this.checked = false;
         this.indeterminatable = false;
         this.indeterminate = false;
+        this.left = false;
         this._hasInner = !!this.innerHTML.trim().length;
     }
     static { this.styles = [
         css `
-      :host {
-        display: flex;
-      }
-
       div {
         display: flex;
+        gap: var(--input-intra-gap, 7px);
+
         align-items: center;
         cursor: pointer;
       }
@@ -68,7 +67,6 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
       }
 
       [label] {
-        margin: var(--ox-checkbox-label-margin, 0 0 0 7px);
         color: var(--ox-checkbox-label-color, #3a5877);
       }
 
@@ -80,10 +78,15 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
     render() {
         return html `
       <div @click=${this.onClick} ?disabled=${this.disabled}>
+        ${this._hasInner && this.left
+            ? html ` <span label>
+              <slot></slot>
+            </span>`
+            : ''}
         <a href="#" @click=${(e) => e.preventDefault()} checkbox>
           ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}
         </a>
-        ${this._hasInner
+        ${this._hasInner && !this.left
             ? html ` <span label>
               <slot></slot>
             </span>`
@@ -164,6 +167,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'indeterminate', reflect: true })
 ], OxCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'left-label' })
+], OxCheckbox.prototype, "left", void 0);
 __decorate([
     state()
 ], OxCheckbox.prototype, "_hasInner", void 0);

package/dist/src/ox-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      div {\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n      }\n\n      [disabled] {\n        opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n        cursor: auto;\n      }\n\n      [checkbox] {\n        display: flex;\n        border-radius: var(--ox-checkbox-border-radius, 4px);\n        border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n        background-color: var(--ox-checkbox-background-color, #fff);\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n        align-items: center;\n        justify-content: center;\n      }\n\n      a {\n        background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n        border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n      }\n\n      :host([checked]) a {\n        background-color: var(--ox-checkbox-checked-background-color, #fff);\n        border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n      }\n\n      path {\n        fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n      }\n\n      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, #38a25b);\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n      }\n\n      [label] {\n        margin: var(--ox-checkbox-label-margin, 0 0 0 7px);\n        color: var(--ox-checkbox-label-color, #3a5877);\n      }\n\n      :host([checked]) [label] {\n        font-weight: var(--ox-checkbox-checked-font-weight, bold);\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div @click=${this.onClick} ?disabled=${this.disabled}>\n        <a href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\n          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown.bind(this))\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    if (!this.indeterminatable) {\n      this.indeterminate = false\n      this.checked = !this.checked\n    } else {\n      if (this.indeterminate) {\n        this.indeterminate = false\n        this.checked = true\n      } else if (this.checked) {\n        this.indeterminate = false\n        this.checked = false\n      } else {\n        this.indeterminate = true\n        this.checked = undefined\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.checked\n      })\n    )\n  }\n\n  get checkedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get uncheckedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get indeterminateIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke=\"rgba(0, 0, 0, 0.7)\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    `\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.key === ' ' || e.key == 'Spacebar') {\n      this.onClick()\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}
+{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      div {\n        display: flex;\n        gap: var(--input-intra-gap, 7px);\n\n        align-items: center;\n        cursor: pointer;\n      }\n\n      [disabled] {\n        opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n        cursor: auto;\n      }\n\n      [checkbox] {\n        display: flex;\n        border-radius: var(--ox-checkbox-border-radius, 4px);\n        border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n        background-color: var(--ox-checkbox-background-color, #fff);\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n        align-items: center;\n        justify-content: center;\n      }\n\n      a {\n        background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n        border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n      }\n\n      :host([checked]) a {\n        background-color: var(--ox-checkbox-checked-background-color, #fff);\n        border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n      }\n\n      path {\n        fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n      }\n\n      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, #38a25b);\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n      }\n\n      [label] {\n        color: var(--ox-checkbox-label-color, #3a5877);\n      }\n\n      :host([checked]) [label] {\n        font-weight: var(--ox-checkbox-checked-font-weight, bold);\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div @click=${this.onClick} ?disabled=${this.disabled}>\n        ${this._hasInner && this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n        <a href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\n          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner && !this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown.bind(this))\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    if (!this.indeterminatable) {\n      this.indeterminate = false\n      this.checked = !this.checked\n    } else {\n      if (this.indeterminate) {\n        this.indeterminate = false\n        this.checked = true\n      } else if (this.checked) {\n        this.indeterminate = false\n        this.checked = false\n      } else {\n        this.indeterminate = true\n        this.checked = undefined\n      }\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.checked\n      })\n    )\n  }\n\n  get checkedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get uncheckedIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n      </svg>\n    `\n  }\n\n  get indeterminateIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke=\"rgba(0, 0, 0, 0.7)\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    `\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.key === ' ' || e.key == 'Spacebar') {\n      this.onClick()\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}