@italia/checkbox 1.0.0-alpha.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"it-checkbox.js","sources":["../../../src/it-checkbox.ts"],"sourcesContent":["import { setAttributes, FormControl, FormControlController } from '@italia/globals';\n\n// import { registerTranslation } from '@italia/i18n';\nimport { html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { when } from 'lit/directives/when.js';\nimport { live } from 'lit/directives/live.js';\n\nimport styles from './checkbox.scss';\n\n@customElement('it-checkbox')\nexport class ItCheckbox extends FormControl {\n  static styles = styles;\n\n  protected readonly formControlController: FormControlController = new FormControlController(this, {\n    value: (control: FormControl) =>\n      (control as ItCheckbox).checked ? (control as ItCheckbox).value || 'true' : undefined,\n    setValue: (control: FormControl, value: unknown) => {\n      const checkbox = control as ItCheckbox;\n      checkbox.checked = Boolean(value);\n    },\n  });\n\n  /**\n   * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\n   * to `text`.\n   */\n  type = 'checkbox';\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Draws checkboxes inline, side by side. */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /** Draws checkboxes in groups. */\n  @property({ type: Boolean, reflect: true })\n  group = false;\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  @queryAssignedElements({ slot: 'label' })\n  labelElements!: HTMLElement[];\n\n  get label(): string {\n    if (this.labelElements.length > 0) {\n      return this.labelElements[0].innerText.trim();\n    }\n    return '';\n  }\n\n  /** The input's help text. */\n  @property({ type: String, attribute: 'support-text' })\n  supportText = '';\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.inputElement.click();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback?.();\n    this._handleReady();\n    // 🔍 Verifica se il parent è un it-checkbox-group\n    this.isInGroup = !!this.closest('it-checkbox-group');\n  }\n\n  override updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated?.(changedProperties);\n\n    // logger\n    if (!this.label || this.label?.length === 0) {\n      this.logger.warn(\n        `Label is required to ensure accessibility. Please, define a label for <it-checkbox name=\"${this.name}\" ... /> .`,\n      );\n    }\n  }\n\n  protected override _handleClick(e: Event): void {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    super._handleClick(e);\n    this._handleChange(e);\n    // ✅ Evento standard per compatibilità\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  private _renderInput(supportTextId: string, invalid: boolean, validityMessage: string) {\n    const ariaDescribedBy = this.composeClass(\n      this.supportText?.length > 0 ? supportTextId : '',\n      this._ariaAttributes['aria-describedby']?.length > 0 ? this._ariaAttributes['aria-describedby'] : '',\n      validityMessage?.length > 0 ? `invalid-feedback-${this._id}` : '',\n    );\n\n    const inputClasses = this.composeClass(\n      'it-form__control',\n      invalid ? 'is-invalid' : '',\n      !invalid && this._touched ? 'just-validate-success-field' : '',\n      this.indeterminate ? 'semi-checked' : '',\n    );\n\n    const inputIsRequired = this.required && !this.isInGroup; // Disabilita il 'required' nativo se siamo in un gruppo\n\n    const inputRender = html`\n      <input\n        part=\"checkbox focusable\"\n        ${setAttributes(this._ariaAttributes)}\n        aria-describedby=${ifDefined(ariaDescribedBy || undefined)}\n        aria-invalid=${ifDefined(invalid ? 'true' : undefined)}\n        @input=\"${this._handleInput}\"\n        @blur=${this._handleBlur}\n        @focus=${this._handleFocus}\n        @click=${this._handleClick}\n        @invalid=${this._handleInvalid}\n        type=\"${this.type}\"\n        id=\"${this._id}\"\n        name=\"${this.name}\"\n        .checked=${live(this.checked)}\n        .indeterminate=${live(this.indeterminate)}\n        .disabled=${this.disabled}\n        .required=${inputIsRequired}\n        ?formNoValidate=${this.customValidation}\n        .value=\"${live(this.value)}\"\n        class=\"${inputClasses}\"\n      />\n    `;\n\n    return inputRender;\n  }\n\n  // Render the UI as a function of component state\n  override render() {\n    const supportTextId = `${this._id}-support-text`;\n\n    const supportTextRender = html` ${when(\n      this.supportText,\n      () => html` <small class=\"form-text\" id=\"${supportTextId}\">${this.supportText}</small> `,\n    )}`;\n\n    const showValidation = this.formControlController.submittedOnce || this.customValidation; // true; // this._touched || this.customValidation ;\n    const validityMessage = (showValidation ? (this.validationMessage ?? '') : '') ?? '';\n\n    const invalid =\n      validityMessage?.length > 0 || (!this.customValidation && this.inputElement?.checkValidity() === false);\n\n    const validityMessageRender = html`<div\n      role=\"alert\"\n      id=\"invalid-feedback-${this._id}\"\n      class=\"invalid-feedback form-feedback form-text form-feedback just-validate-error-label\"\n      ?hidden=${!(validityMessage?.length > 0)}\n    >\n      <span class=\"visually-hidden\"><slot name=\"label\"></slot>: </span>${validityMessage}\n    </div>`;\n\n    const wrapperClasses = this.composeClass(\n      'form-check',\n      this.inline ? 'form-check-inline' : '',\n      this.group ? 'form-check-group' : '',\n    );\n\n    const labelClasses = this.composeClass(this.disabled ? 'disabled' : '');\n\n    return html`\n      <div class=\"${wrapperClasses}\" part=\"input-wrapper\">\n        ${this._renderInput(supportTextId, invalid, validityMessage)}\n        <label for=\"${ifDefined(this._id || undefined)}\" part=\"label\" class=\"${labelClasses}\"\n          ><slot name=\"label\"></slot\n        ></label>\n        ${validityMessageRender} ${supportTextRender}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'it-checkbox': ItCheckbox;\n  }\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@italia/checkbox",
+  "description": "Web component it-checkbox del Design system .italia",
+  "version": "1.0.0-alpha.4",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/italia/dev-kit-italia.git",
+    "directory": "packages/checkbox"
+  },
+  "author": "Presidenza del Consiglio dei Ministri",
+  "homepage": "https://italia.github.io/dev-kit-italia",
+  "bugs": {
+    "url": "https://github.com/italia/dev-kit-italia/issues"
+  },
+  "type": "module",
+  "main": "./dist/src/index.js",
+  "module": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./it-checkbox.js": "./dist/src/it-checkbox.js",
+    "./it-checkbox-group.js": "./dist/src/it-checkbox-group.js",
+    "./styles/*": "./styles/*"
+  },
+  "files": [
+    "dist/src",
+    "README.md",
+    "AUTHORS",
+    "LICENSE",
+    "custom-elements.json",
+    "styles"
+  ],
+  "dependencies": {
+    "bootstrap-italia": "github:italia/bootstrap-italia#ba6eddb24194f44d1080deb24701e0603457d176",
+    "lit": "^3.3.0",
+    "@italia/globals": "^1.0.0-alpha.4",
+    "@italia/i18n": "^1.0.0-alpha.4"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@open-wc/testing": "^4.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/mocha": "^10.0.10",
+    "@web/test-runner": "^0.18.2",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.42.0",
+    "rollup-plugin-scss-lit": "^2.1.0",
+    "sass": "^1.89.0",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.3",
+    "@italia/test-config": "^0.0.0",
+    "@italia/typescript-config": "^0.0.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "analyze": "cem analyze --litelement --exclude dist",
+    "build": "rollup --config rollup.config.js",
+    "clean": "rimraf node_modules .turbo .rollup.cache dist coverage",
+    "prepublish": "pnpm build",
+    "lint": "eslint --ext .ts \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" && stylelint \"src/**/*.scss\" && prettier \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" --check",
+    "format": "eslint --ext .ts \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" --fix && stylelint \"src/**/*.scss\" --fix && prettier \"src/**/*.ts\" \"stories/**/*.ts\" \"test/**/*.ts\" --write",
+    "test": "wtr --coverage --node-resolve --config web-test-runner.config.js"
+  }
+}

package/styles/globals.scss

@@ -0,0 +1,21 @@
+it-checkbox {
+  --it-host-display: block;
+  display: var(--it-host-display);
+
+  &[inline] {
+    --it-host-display: inline-block;
+    margin-right: 1rem;
+  }
+
+  &:not(:defined) {
+    &[group] {
+      margin-bottom: 1rem;
+    }
+
+    [slot='label'] {
+      margin-left: 25px;
+      width: max-content;
+      display: inline-block;
+    }
+  }
+}