@trendyol/baklava 2.0.0-beta.48 → 2.0.0-beta.50

package/dist/custom-elements.json

@@ -297,74 +297,116 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/checkbox/bl-checkbox.ts",
+      "path": "src/components/checkbox-group/bl-checkbox-group.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "blCheckboxGroupTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'bl-checkbox-group'"
+        },
+        {
+          "kind": "variable",
+          "name": "blChangeEventName",
+          "type": {
+            "text": "string"
+          },
+          "default": "'bl-checkbox-group-change'"
+        },
         {
           "kind": "class",
           "description": "",
-          "name": "BlCheckbox",
+          "name": "BlCheckboxGroup",
+          "cssProperties": [
+            {
+              "description": "Can be used for showing checkbox options as columns instead of rows. Options are `row` or `column`",
+              "name": "--bl-checkbox-direction"
+            }
+          ],
           "events": [
             {
               "type": {
-                "text": "CustomEvent<boolean>"
+                "text": "CustomEvent<EventDispatcher<string[]>>"
               },
-              "description": "Fires whenever user change the value of the checkbox.",
-              "name": "bl-checkbox-change"
+              "description": "Fires when checkbox group value changed",
+              "name": "bl-checkbox-group-change"
             }
           ],
           "attributes": [
             {
-              "name": "checked",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Sets the checked state for checkbox",
-              "fieldName": "checked"
+              "description": "Sets the checkbox group label",
+              "fieldName": "label"
             },
             {
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string[]"
               },
-              "default": "false",
-              "description": "Sets the disabled state for checkbox",
-              "fieldName": "disabled"
+              "default": "[]",
+              "description": "Set and gets the actual value of the field",
+              "fieldName": "value"
             },
             {
-              "name": "indeterminate",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Sets the indeterminate state for checkbox",
-              "fieldName": "indeterminate"
+              "description": "Sets option as required",
+              "fieldName": "required"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@open-wc/form-control"
             }
           ],
           "superclass": {
             "name": "LitElement",
             "package": "lit"
           },
-          "tagName": "bl-checkbox",
-          "summary": "Baklava Checkbox component",
+          "tagName": "bl-checkbox-group",
+          "summary": "Baklava Button component",
           "customElement": true
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "blCheckboxGroupTag",
+          "declaration": {
+            "name": "blCheckboxGroupTag",
+            "module": "src/components/checkbox-group/bl-checkbox-group.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "blChangeEventName",
+          "declaration": {
+            "name": "blChangeEventName",
+            "module": "src/components/checkbox-group/bl-checkbox-group.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "BlCheckbox",
-            "module": "src/components/checkbox/bl-checkbox.ts"
+            "name": "BlCheckboxGroup",
+            "module": "src/components/checkbox-group/bl-checkbox-group.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bl-checkbox",
           "declaration": {
-            "name": "BlCheckbox",
-            "module": "src/components/checkbox/bl-checkbox.ts"
+            "name": "BlCheckboxGroup",
+            "module": "src/components/checkbox-group/bl-checkbox-group.ts"
           }
         }
       ]
@@ -1312,6 +1354,132 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/checkbox-group/checkbox/bl-checkbox.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "blCheckboxTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'bl-checkbox'"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BlCheckbox",
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<boolean>"
+              },
+              "description": "Fires whenever user change the value of the checkbox.",
+              "name": "bl-checkbox-change"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<string>"
+              },
+              "description": "Fires when checkbox is focused",
+              "name": "bl-focus"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<string>"
+              },
+              "description": "Fires when checkbox is blurred",
+              "name": "bl-blur"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the checked state for checkbox",
+              "fieldName": "checked"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets the checkbox value",
+              "fieldName": "value"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets checkbox as required",
+              "fieldName": "required"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the disabled state for checkbox",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the indeterminate state for checkbox",
+              "fieldName": "indeterminate"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@open-wc/form-control"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "bl-checkbox",
+          "summary": "Baklava Checkbox component",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "blCheckboxTag",
+          "declaration": {
+            "name": "blCheckboxTag",
+            "module": "src/components/checkbox-group/checkbox/bl-checkbox.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "BlCheckbox",
+            "module": "src/components/checkbox-group/checkbox/bl-checkbox.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "declaration": {
+            "name": "BlCheckbox",
+            "module": "src/components/checkbox-group/checkbox/bl-checkbox.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/radio-group/radio/bl-radio.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendyol/baklava",
-  "version": "2.0.0-beta.48",
+  "version": "2.0.0-beta.50",
   "description": "Trendyol Baklava Design System",
   "main": "dist/baklava.js",
   "module": "dist/baklava.js",
@@ -59,7 +59,7 @@
   "dependencies": {
     "@floating-ui/dom": "^0.5.4",
     "@fontsource/rubik": "^4.5.9",
-    "@lit-labs/react": "^1.0.7",
+    "@lit-labs/react": "^1.1.0",
     "@open-wc/form-control": "^0.4.1",
     "@open-wc/form-helpers": "^0.1.2",
     "element-internals-polyfill": "^1.1.15",

package/dist/chunk-KXWO7VUG.js

@@ -1,15 +0,0 @@
-import{a as d}from"./chunk-KQBKSEYJ.js";import{a as c}from"./chunk-23UFIOHV.js";import{a as i,b as l,f as s,g as n,h as a}from"./chunk-HG7OBTQS.js";import{a as r}from"./chunk-NZ3RGSR6.js";var p=i`:host{display:inline-block;vertical-align:middle}label{display:flex;align-items:center;gap:var(--bl-size-2xs);color:var(--bl-color-secondary);font:var(--bl-font-title-3);cursor:pointer;user-select:none}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);border:1px solid var(--bl-color-border);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-content-primary-contrast);font-size:var(--bl-font-size-2xs)}:host([checked]) .label{color:var(--bl-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:0}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--bl-color-secondary-background)}`,h=p;var e=class extends s{constructor(){super(...arguments);this.checked=!1;this.disabled=!1;this.indeterminate=!1}static get styles(){return[h]}handleChange(t){let o=t.target;this.checked=o.checked,this.onChange(o.checked),this.indeterminate=!1}update(t){super.update(t),this.indeterminate&&this.checked&&(this.checked=!1,this.requestUpdate("checked",!0))}render(){let t="";return this.checked&&(t="check"),this.indeterminate&&(t="minus"),l`
-      <label>
-        <input
-          type="checkbox"
-          name="checkbox"
-          .checked=${d(this.checked)}
-          ?disabled=${this.disabled}
-          .indeterminate=${this.indeterminate}
-          @change=${this.handleChange}
-        />
-        <div class="check-mark">${t?l`<bl-icon name="${t}"></bl-icon>`:null}</div>
-        <span class="label"><slot></slot></span>
-      </label>
-    `}};r([a({type:Boolean,reflect:!0})],e.prototype,"checked",2),r([a({type:Boolean,reflect:!0})],e.prototype,"disabled",2),r([a({type:Boolean,reflect:!0})],e.prototype,"indeterminate",2),r([c("bl-checkbox-change")],e.prototype,"onChange",2),e=r([n("bl-checkbox")],e);export{e as a};
-//# sourceMappingURL=chunk-KXWO7VUG.js.map

package/dist/chunk-KXWO7VUG.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/components/checkbox/bl-checkbox.css", "../src/components/checkbox/bl-checkbox.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;vertical-align:middle}label{display:flex;align-items:center;gap:var(--bl-size-2xs);color:var(--bl-color-secondary);font:var(--bl-font-title-3);cursor:pointer;user-select:none}input{appearance:none;position:absolute}.check-mark{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--bl-size-m);height:var(--bl-size-m);border:1px solid var(--bl-color-border);border-radius:var(--bl-border-radius-xs);color:var(--bl-color-content-primary-contrast);font-size:var(--bl-font-size-2xs)}:host([checked]) .label{color:var(--bl-color-primary)}:host(:is([checked],[indeterminate])) .check-mark{background-color:var(--bl-color-primary);border:0}:host([disabled]) .check-mark,:host([disabled]) .label{color:var(--bl-color-content-passive)}:host([disabled]) .check-mark{background-color:var(--bl-color-secondary-background)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../icon/bl-icon';\nimport style from './bl-checkbox.css';\n\n/**\n * @tag bl-checkbox\n * @summary Baklava Checkbox component\n */\n@customElement('bl-checkbox')\nexport default class BlCheckbox extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checked state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the disabled state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets the indeterminate state for checkbox\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Fires whenever user change the value of the checkbox.\n   */\n  @event('bl-checkbox-change') private onChange: EventDispatcher<boolean>;\n\n  handleChange(event: CustomEvent) {\n    const target = event.target as HTMLInputElement;\n    this.checked = target.checked;\n    this.onChange(target.checked);\n    this.indeterminate = false;\n  }\n\n  update(changedProperties: Map<string, unknown>) {\n    super.update(changedProperties);\n    if (this.indeterminate && this.checked) {\n      this.checked = false;\n      this.requestUpdate('checked', true);\n    }\n  }\n\n  render(): TemplateResult {\n    let icon = '';\n    if (this.checked) icon = 'check';\n    if (this.indeterminate) icon = 'minus';\n\n    return html`\n      <label>\n        <input\n          type=\"checkbox\"\n          name=\"checkbox\"\n          .checked=${live(this.checked)}\n          ?disabled=${this.disabled}\n          .indeterminate=${this.indeterminate}\n          @change=${this.handleChange}\n        />\n        <div class=\"check-mark\">${icon ? html`<bl-icon name=\"${icon}\"></bl-icon>` : null}</div>\n        <span class=\"label\"><slot></slot></span>\n      </label>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-checkbox': BlCheckbox;\n  }\n}\n"],
-  "mappings": "4LACO,IAAMA,EAASC,22BACfC,EAAQF,ECUf,IAAqBG,EAArB,cAAwC,CAAW,CAAnD,kCASE,aAAU,GAMV,cAAW,GAMX,mBAAgB,GApBhB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyBA,aAAaC,EAAoB,CAC/B,IAAMC,EAASD,EAAM,OACrB,KAAK,QAAUC,EAAO,QACtB,KAAK,SAASA,EAAO,OAAO,EAC5B,KAAK,cAAgB,EACvB,CAEA,OAAOC,EAAyC,CAC9C,MAAM,OAAOA,CAAiB,EAC1B,KAAK,eAAiB,KAAK,UAC7B,KAAK,QAAU,GACf,KAAK,cAAc,UAAW,EAAI,EAEtC,CAEA,QAAyB,CACvB,IAAIC,EAAO,GACX,OAAI,KAAK,UAASA,EAAO,SACrB,KAAK,gBAAeA,EAAO,SAExBC;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKUC,EAAK,KAAK,OAAO;AAAA,sBAChB,KAAK;AAAA,2BACA,KAAK;AAAA,oBACZ,KAAK;AAAA;AAAA,kCAESF,EAAOC,mBAAsBD,gBAAqB;AAAA;AAAA;AAAA,KAIlF,CACF,EAtDEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBT,EASnB,uBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBT,EAenB,wBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApBvBT,EAqBnB,6BAKqCQ,EAAA,CAApCN,EAAM,oBAAoB,GA1BRF,EA0BkB,wBA1BlBA,EAArBQ,EAAA,CADC,EAAc,aAAa,GACPR",
-  "names": ["styles", "r", "bl_checkbox_default", "BlCheckbox", "bl_checkbox_default", "event", "target", "changedProperties", "icon", "$", "l", "__decorateClass", "e"]
-}

package/dist/components/checkbox/bl-checkbox.d.ts

@@ -1,34 +0,0 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
-import '../icon/bl-icon';
-/**
- * @tag bl-checkbox
- * @summary Baklava Checkbox component
- */
-export default class BlCheckbox extends LitElement {
-    static get styles(): CSSResultGroup;
-    /**
-     * Sets the checked state for checkbox
-     */
-    checked: boolean;
-    /**
-     * Sets the disabled state for checkbox
-     */
-    disabled: boolean;
-    /**
-     * Sets the indeterminate state for checkbox
-     */
-    indeterminate: boolean;
-    /**
-     * Fires whenever user change the value of the checkbox.
-     */
-    private onChange;
-    handleChange(event: CustomEvent): void;
-    update(changedProperties: Map<string, unknown>): void;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'bl-checkbox': BlCheckbox;
-    }
-}
-//# sourceMappingURL=bl-checkbox.d.ts.map

package/dist/components/checkbox/bl-checkbox.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bl-checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/bl-checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIvE,OAAO,iBAAiB,CAAC;AAGzB;;;GAGG;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,UAAU;IAChD,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAED;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,aAAa,UAAS;IAEtB;;OAEG;IAC0B,OAAO,CAAC,QAAQ,CAA2B;IAExE,YAAY,CAAC,KAAK,EAAE,WAAW;IAO/B,MAAM,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQ9C,MAAM,IAAI,cAAc;CAoBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/checkbox/bl-checkbox.js

@@ -1,2 +0,0 @@
-import{a}from"../../chunk-KXWO7VUG.js";import"../../chunk-KQBKSEYJ.js";import"../../chunk-WXJKPVRA.js";import"../../chunk-72IJCTLJ.js";import"../../chunk-23UFIOHV.js";import"../../chunk-HG7OBTQS.js";import"../../chunk-NZ3RGSR6.js";export{a as default};
-//# sourceMappingURL=bl-checkbox.js.map

package/dist/components/checkbox/bl-checkbox.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"bl-checkbox.test.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/bl-checkbox.test.ts"],"names":[],"mappings":""}