@felleslosninger/minid-elements 0.0.97 → 0.0.99

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@felleslosninger/minid-elements",
-  "version": "0.0.97",
+  "version": "0.0.99",
   "description": "MinID Web Components",
   "author": "Digitaliseringsdirektoratet",
   "license": "MIT",
@@ -42,6 +42,10 @@
       "import": "./dist/components/code-input.js",
       "types": "./dist/components/code-input.component.d.ts"
     },
+    "./country-labels-no": {
+      "import": "./dist/utilities/country-labels-no.js",
+      "types": "./dist/components/country-labels-no.d.ts"
+    },
     "./combobox": {
       "import": "./dist/components/combobox.js",
       "types": "./dist/components/combobox.component.d.ts"
@@ -126,6 +130,7 @@
   "customElements": "custom-elements.json",
   "scripts": {
     "make-icons": "node ./scripts/make-icons.js",
+    "make-tailwind": "node ./scripts/make-tailwind-theme.js",
     "build": "rimraf dist && tsc && npm run analyze && vite build",
     "build:cdn": "rimraf dist-cdn && tsc && vite build --config vite.cdn.config.js",
     "storybook": "storybook dev -p 6006",
@@ -135,6 +140,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.10",
+    "@u-elements/u-datalist": "^0.1.5",
     "composed-offset-position": "^0.0.6",
     "element-internals-polyfill": "^1.3.10",
     "input-format": "^0.3.11",
@@ -144,8 +150,8 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.3",
-    "@digdir/designsystemet-css": "^0.10.0",
-    "@digdir/designsystemet-theme": "^0.15.3",
+    "@digdir/designsystemet-css": "^1.0.3",
+    "@digdir/designsystemet-theme": "^1.0.3",
     "@floating-ui/dom": "^1.6.10",
     "@navikt/aksel-icons": "^7.1.2",
     "@storybook/addon-controls": "^8.6.0",
@@ -171,7 +177,7 @@
     "eslint": "^8.52.0",
     "eslint-plugin-storybook": "^0.11.3",
     "postcss": "^8.5.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "rimraf": "^5.0.5",
     "rollup": "^4.2.0",

package/dist/components/modal.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"modal.component.d.ts","sourceRoot":"","sources":["../../src/components/modal.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,UAAU,CAAC;KACzB;CACF;;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,UAAW,SAAQ,eAA0B;IAExD,MAAM,EAAG,iBAAiB,CAAC;IAG3B,KAAK,EAAG,WAAW,CAAC;IAEpB;;;OAGG;IAEH,IAAI,UAAS;IAEb;;;OAGG;IAEH,OAAO,SAAM;IAEb,OAAO,CAAC,YAAY;IAkBpB,kBAAkB,GAAI,OAAO,KAAK,UAQhC;IAEF,OAAO,CAAC,mBAAmB;IAQrB,gBAAgB;IA+CtB;;OAEG;IACG,IAAI;IASV;;OAEG;IACG,IAAI;IASD,MAAM;CA8BhB"}

package/dist/components/modal.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"modal.js","sources":["../../src/components/modal.component.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../internal/event';\nimport { watch } from '../internal/watch';\nimport { styled } from '../mixins/tailwind.mixin';\nimport './icon/icon.component';\nimport {\n  getAnimation,\n  setDefaultAnimation,\n} from '../utilities/animation-registry';\nimport { animateTo, stopAnimations } from '../internal/animate';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../internal/scroll';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mid-modal': MinidModal;\n  }\n}\n\nconst styles = [\n  css`\n    :host {\n      --max-width: 40rem;\n      --footer-and-header-height: 140px;\n      display: contents;\n    }\n\n    .dialog {\n      max-width: var(--max-width);\n      max-height: unset;\n    }\n\n    .dialog[open] {\n      animation: none;\n    }\n\n    .dialog.closing::backdrop {\n      animation: fade-out 200ms ease-in forwards;\n    }\n\n    .modal-content {\n      max-height: calc(90vh - var(--footer-and-header-height));\n      overflow: auto;\n    }\n\n    .footer {\n      justify-content: flex-end;\n    }\n\n    @keyframes fade-out {\n      from {\n        opacity: 1;\n      }\n\n      to {\n        opacity: 0;\n      }\n    }\n  `,\n];\n\n/**\n *\n * @event mid-show - Emitted when the modal opens.\n * @event mid-after-show - Emitted after the modal opens and all animations are complete.\n * @event mid-hide - Emitted when the modal closes.\n * @event mid-after-hide - Emitted after the modal closes and all animations are complete.\n * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} mid-request-close - Emitted when the user attempts to\n *   close the modal by clicking the close button, clicking the overlay, or pressing escape. Calling\n *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in\n *   destructive behavior such as data loss.\n *\n * @csspart base - Select the base `dialog` element\n * @csspart header - Select the `header` element\n * @csspart body - Select the `article` element\n * @csspart footer - Select the `footer` element\n *\n * @slot -- The default slot for the body content of the modal\n * @slot heading - The content inside the `h2` element\n * @slot footer - The content inside the `footer` element\n *\n * @animation modal.show - The animation to use when showing the modal.\n * @animation modal.hide - The animation to use when hiding the modal.\n * @animation modal.denyClose - The animation to use when closing the modal is prevented.\n *\n */\n@customElement('mid-modal')\nexport class MinidModal extends styled(LitElement, styles) {\n  @query('#dialog')\n  dialog!: HTMLDialogElement;\n\n  @query('.dialog')\n  panel!: HTMLElement;\n\n  /**\n   * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n   */\n  @property({ reflect: true })\n  heading = '';\n\n  private requestClose(source: 'close-button' | 'keyboard' | 'overlay') {\n    const requestCloseEvent = new CustomEvent('mid-request-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n      detail: { source },\n    });\n    this.dispatchEvent(requestCloseEvent);\n\n    if (requestCloseEvent.defaultPrevented) {\n      const { keyframes, options } = getAnimation(this, 'modal.denyClose');\n      animateTo(this.panel, keyframes, options);\n      return;\n    }\n\n    this.hide();\n  }\n\n  handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n\n    if (event.defaultPrevented) {\n      this.requestClose('keyboard');\n    } else {\n      this.hide();\n    }\n  };\n\n  private handleBackdropClick({ target }: Event) {\n    // if the target is the dialog, the backdrop was clicked\n    if (target === this.dialog) {\n      this.requestClose('overlay');\n    }\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.dispatchEvent(\n        new Event('mid-show', { composed: true, bubbles: true })\n      );\n      // this.addOpenListeners();\n      this.dialog.showModal();\n\n      lockBodyScrolling(this);\n\n      const panelAnimation = getAnimation(this, 'modal.show');\n      await animateTo(\n        this.panel,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      ),\n        this.dispatchEvent(\n          new Event('mid-after-show', { bubbles: true, composed: true })\n        );\n    } else {\n      // Hide\n      this.dispatchEvent(\n        new Event('mid-hide', { bubbles: true, composed: true })\n      );\n\n      await Promise.all([stopAnimations(this.dialog)]);\n      const panelAnimation = getAnimation(this, 'modal.hide');\n\n      // The backdrop can only be animated with css because it's a pseudo element\n      // so we add a closing class to trigger it at the same time as the modal animation\n      this.panel.classList.add('closing');\n      await animateTo(\n        this.panel,\n        panelAnimation.keyframes,\n        panelAnimation.options\n      );\n      this.panel.classList.remove('closing');\n      this.dialog.close();\n      this.panel.hidden = false;\n      unlockBodyScrolling(this);\n      this.dispatchEvent(\n        new Event('mid-after-hide', { composed: true, bubbles: true })\n      );\n    }\n  }\n\n  /**\n   * Shows the modal.\n   */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'mid-after-show');\n  }\n\n  /**\n   * Hides the modal\n   */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'mid-after-hide');\n  }\n\n  override render() {\n    return html`\n      <dialog\n        part=\"base\"\n        id=\"dialog\"\n        class=\"dialog fds-modal m-auto\"\n        @cancel=${this.handleDialogCancel}\n        @click=${this.handleBackdropClick}\n      >\n        <header part=\"header\" class=\"fds-modal__header flex\">\n          <h2 class=\"fds-heading fds-heading--xs\">\n            <slot name=\"heading\"></slot>\n          </h2>\n          <button\n            autofocus\n            @click=\"${() => this.requestClose('close-button')}\"\n            class=\"fds-btn fds-focus fds-btn--md fds-btn--tertiary fds-btn--second fds-btn--icon-only fds-modal__header__button\"\n          >\n            <mid-icon class=\"text-[1.75rem]\" name=\"xmark\"></mid-icon>\n          </button>\n        </header>\n        <article part=\"body\" class=\"fds-modal__content modal-content\">\n          <slot> </slot>\n        </article>\n        <footer part=\"footer\" class=\"fds-modal__footer footer\">\n          <slot name=\"footer\"> </slot>\n        </footer>\n      </dialog>\n    `;\n  }\n}\n\nsetDefaultAnimation('modal.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('modal.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 },\n  ],\n  options: { duration: 250, easing: 'ease' },\n});\n\nsetDefaultAnimation('modal.denyClose', {\n  keyframes: [{ scale: 1 }, { scale: 1.03 }, { scale: 1 }],\n  options: { duration: 100 },\n});\n"],"names":[],"mappings":"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"}

package/dist/utilities/countries.d.ts

@@ -1,3 +0,0 @@
-import { CountryCode } from 'libphonenumber-js';
-export declare const countryLabelsNO: Record<CountryCode, string>;
-//# sourceMappingURL=countries.d.ts.map

package/dist/utilities/countries.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"countries.d.ts","sourceRoot":"","sources":["../../src/utilities/countries.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAsPvD,CAAC"}