@italia/toggle 1.0.0-alpha.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"it-toggle.js","sources":["../../../src/it-toggle.ts"],"sourcesContent":["import { customElement } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { ItCheckboxBase } from '@italia/checkbox/it-checkbox-base.js';\n\nimport styles from './toggle.scss';\n\n/**\n * @element it-toggle\n */\n@customElement('it-toggle')\nexport class ItToggle extends ItCheckboxBase {\n  static override styles = [ItCheckboxBase.styles, styles];\n\n  type = 'checkbox'; // Toggle is still a checkbox input type\n\n  override render() {\n    const supportTextId = `${this._id}-support-text`;\n\n    const supportTextRender = this.getSupportTextRender(supportTextId);\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 = this.getValidityMessageRender(validityMessage);\n\n    const wrapperClasses = this.getWrapperClasses();\n    return html`\n      <div class=\"${wrapperClasses}\" part=\"toggle-wrapper input-wrapper\">\n        <div class=\"toggles\">\n          <label for=\"${this._id}\" part=\"label focusable\">\n            <slot name=\"label\"></slot>\n            ${this._renderInput(supportTextId, invalid, validityMessage)}\n            <span class=\"lever\"></span>\n          </label>\n        </div>\n        ${validityMessageRender} ${supportTextRender}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'it-toggle': ItToggle;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,cAAc,CAAA;AAArC,IAAA,WAAA,GAAA;;QAGL,IAAA,CAAA,IAAI,GAAG,UAAU;IA6BnB;IA3BW,MAAM,GAAA;AACb,QAAA,MAAM,aAAa,GAAG,CAAA,EAAG,IAAI,CAAC,GAAG,eAAe;QAEhD,MAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,CAAC,aAAa,CAAC;QAElE,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,CAAC,aAAa,IAAI,IAAI,CAAC,gBAAgB;QACxF,MAAM,eAAe,GAAG,CAAC,cAAc,IAAI,IAAI,CAAC,iBAAiB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;QAEpF,MAAM,OAAO,GACX,eAAe,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,YAAY,EAAE,aAAa,EAAE,KAAK,KAAK,CAAC;QAEzG,MAAM,qBAAqB,GAAG,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC;AAE5E,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE;AAC/C,QAAA,OAAO,IAAI,CAAA;oBACK,cAAc,CAAA;;AAEV,sBAAA,EAAA,IAAI,CAAC,GAAG,CAAA;;cAElB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,EAAE,eAAe,CAAC;;;;AAI9D,QAAA,EAAA,qBAAqB,IAAI,iBAAiB;;KAE/C;IACH;;AA9BgB,QAAA,CAAA,MAAM,GAAG,CAAC,cAAc,CAAC,MAAM,EAAE,MAAM,CAAjC;AADX,QAAQ,GAAA,UAAA,CAAA;IADpB,aAAa,CAAC,WAAW;AACb,CAAA,EAAA,QAAQ,CAgCpB;;;;"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@italia/toggle",
+  "description": "Web component it-toggle del Design system .italia",
+  "version": "1.0.0-alpha.7",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/italia/dev-kit-italia.git",
+    "directory": "packages/toggle"
+  },
+  "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-toggle.js": "./dist/src/it-toggle.js",
+    "./it-toggle-group.js": "./dist/src/it-toggle-group.js",
+    "./styles/*": "./styles/*"
+  },
+  "files": [
+    "dist/src",
+    "README.md",
+    "AUTHORS",
+    "LICENSE",
+    "custom-elements.json",
+    "styles"
+  ],
+  "dependencies": {
+    "bootstrap-italia": "github:italia/bootstrap-italia#8c67506065fb844becbec9cc74f2d11de7101404",
+    "lit": "^3.3.0",
+    "@italia/checkbox": "^1.0.0-alpha.7",
+    "@italia/globals": "^1.0.0-alpha.7",
+    "@italia/i18n": "^1.0.0-alpha.7"
+  },
+  "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,22 @@
+it-toggle {
+  --it-host-display: block;
+  display: var(--it-host-display);
+
+  &[inline] {
+    --it-host-display: inline-block;
+    margin-right: 1rem;
+  }
+
+  &:not(:defined) {
+    display: flex;
+    justify-content: space-between;
+
+    &[group] {
+      margin-bottom: 1rem;
+    }
+
+    [slot='label'] {
+      margin-bottom: var(--#{$prefix}spacing-xxs);
+    }
+  }
+}