@inera/ids-design 5.4.0 → 5.4.1

package/package.json

@@ -1,26 +1,9 @@
-{
-  "name": "@inera/ids-design",
-  "version": "5.4.0",
-  "description": "",
-  "main": "index.js",
-  "type": "module",
-  "scripts": {
-    "build": "rimraf dist && npm run build-tailwind && rollup -c",
-    "build-tailwind": "npx tailwindcss -i ./tailwind/util-tailwind.scss -o ./src/global/util/util.scss",
-    "pack": "rimraf dist && rollup -c && cd dist && npm pack"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "lit": "^3.2.0",
-    "rimraf": "^6.0.1",
-    "rollup": "^2.79.1",
-    "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-generate-package-json": "^3.2.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.77.8",
-    "tailwindcss": "^3.4.10",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.4"
-  }
-}
+{
+  "type": "module",
+  "name": "@inera/ids-design",
+  "version": "5.4.1",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/css.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("lit").CSSResult;
-export default _default;

package/dist/license.md

@@ -1,7 +0,0 @@
-# License
-
-The package @inera/ids-design is solely for the purpose of being used for and on behalf of Inera AB and its subsidiaries.
-
-Individuals or entities that are not affiliated with or employed by Inera AB or its subsidiaries are prohibited from accessing or utilizing this package. Additionally, they may not reproduce, sell, publish any information, content, or materials available through it for any purpose.
-
-By accessing and using this package, you agree to be bound by these terms of use.

package/dist/package.json

@@ -1,9 +0,0 @@
-{
-  "type": "module",
-  "name": "@inera/ids-design",
-  "version": "5.4.0",
-  "license": "SEE LICENSE IN LICENSE.md",
-  "publishConfig": {
-    "access": "public"
-  }
-}

package/global.d.ts

@@ -1,4 +0,0 @@
-declare module '*.scss' {
-  const content: {[className: string]: string};
-  export default content;
-}

package/rollup/styleObjects.js

@@ -1,131 +0,0 @@
-const themes = ["1177", "1177-pro", "inera", "inera-admin"];
-
-const createThemeStyleObject = name => ({
-  dir: `themes/${name}`,
-  name: name,
-  extension: "scss"
-});
-export const themeObjects = themes.map(theme => {
-  return createThemeStyleObject(theme);
-});
-
-const createThemeTokenObject = name => ({
-  dir: `themes/${name}`,
-  name: `${name}-tokens`,
-  extension: "css"
-});
-export const themeTokenObjects = themes.map(theme => {
-  return createThemeTokenObject(theme);
-});
-
-const createComponentStyleObject = (name, subdir = "") => ({
-  dir: `components/${subdir + name}`,
-  name: name,
-  extension: "scss"
-});
-
-const createHeaderStylesObject = (name, subdir = "") => ({
-  dir: `components/${subdir}`,
-  name: name,
-  extension: "scss"
-});
-export const componentStyleObjects = [
-  createComponentStyleObject("alert"),
-  createComponentStyleObject("alert-global"),
-  createComponentStyleObject("badge"),
-  createComponentStyleObject("breadcrumbs"),
-  createComponentStyleObject("button-group"),
-  createComponentStyleObject("card"),
-  createComponentStyleObject("carousel"),
-  createHeaderStylesObject("carousel-item", "carousel/"),
-  createComponentStyleObject("date-label"),
-  createComponentStyleObject("dialog"),
-  createComponentStyleObject("dropdown"),
-  createComponentStyleObject("expandable"),
-  createComponentStyleObject("mobile-menu"),
-  createComponentStyleObject("progressbar"),
-  createComponentStyleObject("popover"),
-  createHeaderStylesObject("popover-content", "popover/"),
-  createComponentStyleObject("tag"),
-  createComponentStyleObject("tabs"),
-  createHeaderStylesObject("tab", "tabs/"),
-  createHeaderStylesObject("tab-panel", "tabs/"),
-  createComponentStyleObject("list"),
-  createComponentStyleObject("side-menu"),
-  createComponentStyleObject("stepper"),
-  createComponentStyleObject("notification-badge"),
-  createComponentStyleObject("error-message", "form/"),
-  createComponentStyleObject("textarea", "form/"),
-  createComponentStyleObject("range", "form/"),
-  createComponentStyleObject("select-multiple", "form/"),
-  createComponentStyleObject("group", "form/"),
-  createComponentStyleObject("spinner", "form/"),
-  createComponentStyleObject("column", "grid/"),
-  createComponentStyleObject("data-table"),
-  createComponentStyleObject("side-panel"),
-  createComponentStyleObject("tooltip"),
-  createComponentStyleObject("data-pagination", "pagination/"),
-  createComponentStyleObject("list-pagination", "pagination/"),
-  createHeaderStylesObject("navigation-local", "navigation/local/"),
-  createHeaderStylesObject("navigation-content", "navigation/content/"),
-
-  //1177 Header
-  createHeaderStylesObject("header-1177", "header-1177/"),
-  createHeaderStylesObject("header-1177-avatar", "header-1177/"),
-  createHeaderStylesObject("header-1177-item", "header-1177/"),
-  createHeaderStylesObject("header-1177-nav", "header-1177/"),
-  createHeaderStylesObject("header-1177-nav-item", "header-1177/"),
-  createHeaderStylesObject("header-1177-nav-item-mobile", "header-1177/"),
-  //1177-pro Header
-  createHeaderStylesObject("header-1177-pro", "header-1177-pro/"),
-  createHeaderStylesObject("header-1177-pro-avatar", "header-1177-pro/"),
-  createHeaderStylesObject("header-1177-pro-avatar-mobile", "header-1177-pro/"),
-  createHeaderStylesObject("header-1177-pro-item", "header-1177-pro/"),
-  createHeaderStylesObject("header-1177-pro-nav", "header-1177-pro/"),
-  createHeaderStylesObject("header-1177-pro-nav-item", "header-1177-pro/"),
-  createHeaderStylesObject("header-1177-pro-nav-menu-mobile", "header-1177-pro/"),
-  createHeaderStylesObject("header-1177-pro-region-picker", "header-1177-pro/"),
-  //1177-admin Header
-  createHeaderStylesObject("header-1177-admin", "header-1177-admin/"),
-  createHeaderStylesObject("header-1177-admin-item", "header-1177-admin/"),
-  createHeaderStylesObject("header-1177-admin-avatar", "header-1177-admin/"),
-  createHeaderStylesObject("header-1177-admin-avatar-mobile", "header-1177-admin/"),
-  createHeaderStylesObject("header-1177-admin-nav", "header-1177-admin/"),
-  createHeaderStylesObject("header-1177-admin-nav-item", "header-1177-admin/"),
-
-  //Header-inera
-  createHeaderStylesObject("header-inera", "header-inera/"),
-  createHeaderStylesObject("header-inera-item", "header-inera/"),
-  createHeaderStylesObject("header-inera-nav", "header-inera/"),
-  createHeaderStylesObject("header-inera-nav-item", "header-inera/"),
-  createHeaderStylesObject("header-inera-nav-mobile", "header-inera/"),
-
-  //Header-inera-admin
-  createHeaderStylesObject("header-inera-admin", "header-inera-admin/"),
-  createHeaderStylesObject("header-inera-admin-item", "header-inera-admin/"),
-  createHeaderStylesObject("header-inera-admin-avatar", "header-inera-admin/"),
-  createHeaderStylesObject("header-inera-admin-avatar-mobile", "header-inera-admin/"),
-  createHeaderStylesObject("header-inera-admin-nav", "header-inera-admin/"),
-  createHeaderStylesObject("header-inera-admin-nav-item", "header-inera-admin/"),
-  createHeaderStylesObject("header-inera-admin-nav-mobile", "header-inera-admin/"),
-
-  //footer
-  createComponentStyleObject("footer"),
-  // Footer-1177
-  createHeaderStylesObject("footer-1177", "footer-1177/"),
-  // Footer-1177-admin
-  createHeaderStylesObject("footer-1177-admin", "footer-1177-admin/"),
-  // Footer-1177-pro
-  createHeaderStylesObject("footer-1177-pro", "footer-1177-pro/"),
-  // Footer-inera
-  createHeaderStylesObject("footer-inera", "footer-inera/"),
-  // Footer-inera-admin
-  createHeaderStylesObject("footer-inera-admin", "footer-inera-admin/")
-];
-
-const createPartials = (name, subdir = "") => ({
-  dir: `components/${subdir + name}`,
-  name: `_${name + "-partials"}`,
-  extension: "scss"
-});
-export const partials = [createPartials("column", "grid/")];

package/rollup.config.js

@@ -1,84 +0,0 @@
-import generatePackageJson from 'rollup-plugin-generate-package-json';
-import postcss from 'rollup-plugin-postcss';
-import copy from 'rollup-plugin-copy';
-import {componentStyleObjects, themeObjects, themeTokenObjects, partials} from './rollup/styleObjects';
-
-const globalCSS = [
-  { dir: `global`, name: '_partials', extension: 'scss' },
-  { dir: `global`, name: 'global', extension: 'scss' },
-  { dir: `themes`, name: 'reset', extension: 'scss' },
-  { dir: `global/util`, name: 'util', extension: 'scss' },
-  { dir: `components/table`, name: 'table', extension: 'scss' }
-]
-
-const copmpositeCSS = [
-  { dir: `components/header-1177`, name: 'composite-header-1177', extension: 'scss' },
-  { dir: `components/header-inera-admin`, name: 'composite-header-inera-admin', extension: 'scss' },
-]
-
-const createCSSOutputs = () => {
-  return [
-    ...partials,
-    ...componentStyleObjects,
-    ...themeObjects,
-    ...themeTokenObjects,
-    ...globalCSS,
-    ...copmpositeCSS
-  ].map((component) => ({
-    input: `./src/${component.dir}/${component.name}.${component.extension}`,
-    output: [{
-      file: `./dist/${component.dir}/${component.name}.css`,
-    }],
-    plugins: [
-      postcss({
-        extract: true,
-      }),
-      // Only generate package.json once on last iteration
-      componentStyleObjects[componentStyleObjects.length - 1].name === component.name ? 
-        generatePackageJson({
-          outputFolder: 'dist',
-          baseContents: (pkg) => ({
-            type: 'module',
-            name: pkg.name,
-            version: pkg.version,
-            license: 'SEE LICENSE IN LICENSE.md',
-            publishConfig: {
-              access: "public"
-            }
-          })
-        }) : null,
-      copy({
-        targets: [
-          { src: 'license.md', dest: 'dist' },
-        ]
-      }),
-    ]
-  }));
-}
-
-const createLitOutputs = () => {
-  return componentStyleObjects.map((component) => ({
-    input: `./src/${component.dir}/${component.name}-lit.ts`,
-    output: [{
-      file: `./dist/${component.dir}/${component.name}-lit.js`,
-    }],
-    external: [/^lit/],
-    plugins: [
-      postcss({
-        inject: false,
-        minimize: true
-      }),
-      copy({
-        targets: [
-          { src: 'css.d.ts', dest: `./dist/${component.dir}/`,
-          rename: `${component.name}-lit.d.ts` },
-        ]
-      })
-    ]
-  }));
-}
-
-export default [
-  ...createCSSOutputs(),
-  ...createLitOutputs(),
-]

package/src/components/alert/alert-lit.ts

@@ -1,4 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import AlertSCSS from './alert.scss';
-
-export default css`${unsafeCSS(AlertSCSS)}`;

package/src/components/alert/alert.scss

@@ -1,200 +0,0 @@
-@use "../../global/partials";
-@use "../../layout/breakpoints";
-
-@mixin ids-alert-compact() {
-  grid-template-columns: 1fr;
-  &:has(.ids-alert__button) {
-    grid-template-columns: 1fr auto;
-  }
-
-  .ids-alert__button {
-    grid-row: 1;
-    grid-column: 2;
-    flex: 0 0 auto;
-    width: auto;
-    .ids-alert__expand {
-      float: right;
-    }
-  }
-
-  .ids-alert__content {
-    grid-row-start: 1;
-    grid-column-start: 1;
-    grid-column-end: 2;
-    margin-top: 0;
-    display: block;
-    align-items: center;
-  }
-
-  .ids-alert__content__icon {
-    margin-top: -0.313rem;
-    margin-right: 0.625rem;
-    float: left;
-    width: 1.75rem;
-    height: 1.75rem;
-    min-width: 1.75rem;
-    min-height: 1.75rem;
-    max-width: 1.75rem;
-    max-height: 1.75rem;
-  }
-
-  @media (min-width: breakpoints.$medium) {
-    .ids-alert__content {
-      display: flex;
-    }
-
-    .ids-alert__content__icon {
-      align-self: start;
-      margin-right: 1.25rem;
-      width: 3rem;
-      height: 3rem;
-      min-width: 3rem;
-      min-height: 3rem;
-      max-width: 3rem;
-      max-height: 3rem;
-    }
-  }
-}
-
-@mixin ids-alert-ribbon() {
-  grid-template-columns: 1fr;
-  padding: 0.5rem 0.75rem;
-
-  &:has(.ids-alert__button) {
-    grid-template-columns: 1fr auto;
-  }
-
-  .ids-alert__button {
-    grid-row: 1;
-    grid-column: 2;
-    flex: 0 0 auto;
-    height: 1.5rem;
-    width: 1.5rem;
-
-    .ids-alert__close {
-      height: 1rem;
-      width: 1rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .ids-alert__content {
-    grid-row-start: 1;
-    grid-column-start: 1;
-    grid-column-end: 2;
-    margin-top: 0;
-    display: block;
-    align-items: center;
-  }
-
-  .ids-alert__content__icon {
-    align-self: center;
-    margin-top: 0;
-    width: 1.5rem;
-    height: 1.5rem;
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-    max-width: 1.5rem;
-    max-height: 1.5rem;
-    margin-right: 0.625rem;
-    float: left;
-  }
-
-  @media (min-width: breakpoints.$small) {
-    padding: 1rem;
-  }
-
-  @media (min-width: breakpoints.$medium) {
-    .ids-alert__content {
-      display: flex;
-    }
-    .ids-alert__content__icon {
-      float: inherit;
-    }
-  }
-}
-
-.ids-alert {
-  color: var(--IDS-ALERT--INFO__COLOR);
-  background-color: var(--IDS-ALERT--INFO__BACKGROUND-COLOR);
-  border-color: var(--IDS-ALERT--INFO__BORDER-COLOR);
-  padding: 1.875rem;
-  border-radius: var(--IDS-BORDER-RADIUS);
-  border-style: solid;
-  border-width: 0.063rem;
-  font-size: 1rem;
-  line-height: 1.625rem;
-  display: grid;
-  grid-template-columns: 1.875rem 1fr;
-  column-gap: 1rem;
-
-  &:has(.ids-alert__button) {
-    grid-template-columns: 1.875rem 1fr auto;
-  }
-
-  .ids-alert__button {
-    grid-row: 1;
-    grid-column: 3;
-  }
-
-  &.ids-alert--collapsed {
-    padding: 1.25rem 1.875rem;
-    .ids-alert__content {
-      display: none;
-    }
-  }
-  &.ids-alert--attention {
-    background-color: var(--IDS-ALERT--ATTENTION__BACKGROUND-COLOR);
-    border-color: var(--IDS-ALERT--ATTENTION__BORDER-COLOR);
-  }
-  &.ids-alert--success {
-    background-color: var(--IDS-ALERT--SUCCESS__BACKGROUND-COLOR);
-    border-color: var(--IDS-ALERT--SUCCESS__BORDER-COLOR);
-  }
-  &.ids-alert--error {
-    background-color: var(--IDS-ALERT--ERROR__BACKGROUND-COLOR);
-    border-color: var(--IDS-ALERT--ERROR__BORDER-COLOR);
-  }
-  &.ids-alert--compact {
-    @include ids-alert-compact();
-  }
-  &.ids-alert--ribbon {
-    @include ids-alert-ribbon();
-  }
-
-  .ids-alert__headline *,
-  .ids-alert__headline ::slotted(*) {
-    margin: 0 !important;
-    font-size: 1.17rem !important;
-    font-weight: var(--IDS-ALERT__HEADLINE-FONT-WEIGHT) !important;
-    font-family: var(--IDS-ALERT__HEADLINE-FONT-FAMILY) !important;
-  }
-
-  .ids-alert__expand {
-    @include partials.ids-button-base();
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .ids-icon {
-      display: flex;
-      width: 1.5rem;
-      align-items: center;
-      height: 1.5rem;
-      justify-content: center;
-    }
-    @include partials.ids-focusable();
-  }
-
-  .ids-alert__close {
-    @include partials.ids-button-base();
-    @include partials.ids-focusable();
-  }
-
-  .ids-alert__content {
-    grid-row-start: 2;
-    grid-column: 1/-1;
-    margin-top: 0.5rem;
-  }
-}

package/src/components/alert-global/alert-global-lit.ts

@@ -1,4 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import AlertGlobalSCSS from './alert-global.scss';
-
-export default css`${unsafeCSS(AlertGlobalSCSS)}`;

package/src/components/alert-global/alert-global.scss

@@ -1,128 +0,0 @@
-@use "../../global/partials";
-@use "../../global/typography/typography-partials" as typography;
-@use "../../layout/breakpoints";
-
-.ids-alert-global {
-  position: relative;
-  z-index: 1;
-  color: var(--IDS-ALERT-GLOBAL__COLOR);
-  background-color: var(--IDS-ALERT-GLOBAL__BACKGROUND-COLOR);
-  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.3);
-  padding: 1.875rem;
-  border-style: solid;
-  border-width: 0.0625rem;
-  display: block;
-  align-items: center;
-  font-size: 1rem;
-  line-height: 1.625rem;
-  border: none;
-
-  .ids-alert-global__inner {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: var(--IDS__MAX-WIDTH);
-
-    .ids-alert-global__icon-headline {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      gap: 1.25rem;
-    }
-
-    .ids-alert-global__icon {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    .ids-alert-global__header {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1.25rem;
-    }
-
-    .ids-alert-global__headline {
-      display: flex;
-      text-align: left;
-      *,
-      ::slotted(*) {
-        font-family: var(--IDS-ALERT-GLOBAL__HEADLINE-FONT-FAMILY) !important;
-        font-size: 1.125rem !important;
-        font-weight: var(--IDS-ALERT__HEADLINE-FONT-WEIGHT) !important;
-        line-height: 1.75rem !important;
-        color: var(--IDS-ALERT-GLOBAL-HEADLINE-COLOR);
-        margin: 0 !important;
-        display: flex !important;
-        align-items: center !important;
-      }
-    }
-
-    .ids-alert-global__expand {
-      @include partials.ids-button-base();
-      @include typography.ids-body();
-      @include partials.ids-focusable();
-      justify-self: end;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      cursor: pointer;
-      min-height: 1.5rem;
-      min-width: 1.5rem;
-      .ids-icon {
-        display: flex;
-        width: 1.5rem;
-        align-items: center;
-        height: 1.5rem;
-        justify-content: center;
-      }
-    }
-
-    .ids-alert-global__expand-text {
-      margin-right: 1rem;
-      display: none;
-    }
-
-    .ids-alert-global__content {
-      margin-top: 0.75rem;
-    }
-
-    @media (min-width: breakpoints.$medium) {
-      .ids-alert-global__icon {
-        width: 1.875rem;
-        height: 1.875rem;
-      }
-
-      .ids-alert-global__expand-text {
-        display: block;
-      }
-    }
-  }
-
-  .ids-alert-global__sub-content {
-    margin-top: 0.75rem;
-  }
-
-  &.ids-alert-global--collapsed {
-    .ids-alert-global__content {
-      display: none;
-    }
-
-    .ids-alert-global__sub-content {
-      display: none;
-    }
-  }
-
-  &.ids-alert-global--hide-icon-on-m {
-    @media (max-width: breakpoints.$medium) {
-      .ids-alert-global__icon {
-        display: none;
-      }
-    }
-  }
-
-  &.ids-alert-global--agent {
-    color: var(--IDS-ALERT-GLOBAL--AGENT__COLOR) !important;
-    background-color: var(--IDS-ALERT-GLOBAL--AGENT__BACKGROUND-COLOR) !important;
-  }
-}

package/src/components/badge/badge-lit.ts

@@ -1,4 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import BadgeSCSS from './badge.scss';
-
-export default css`${unsafeCSS(BadgeSCSS)}`;

package/src/components/badge/badge.scss

@@ -1,55 +0,0 @@
-@use "../../layout/breakpoints";
-
-.ids-badge {
-  height: 1.5rem;
-  box-sizing: border-box;
-  padding: 0.188rem 0.438rem;
-  display: inline-flex;
-  align-items: center;
-  justify-items: center;
-  font-size: 0.75rem;
-  font-weight: 400;
-  color: var(--IDS-BADGE__COLOR);
-  border-radius: 0.313rem;
-
-  .ids-badge__icon {
-    display: inline-block;
-    margin-right: 0.5rem;
-  }
-
-  &.ids-badge--primary {
-    background-color: var(--IDS-BADGE--PRIMARY__BACKGROUND-COLOR);
-    border: 0.063rem solid var(--IDS-BADGE--PRIMARY__BORDER);
-    color: var(--IDS-BADGE--PRIMARY__COLOR);
-  }
-  &.ids-badge--neutral {
-    background-color: var(--IDS-BADGE--NEUTRAL__BACKGROUND-COLOR);
-    border: var(--IDS-BADGE--NEUTRAL__BORDER);
-  }
-  &.ids-badge--info {
-    background-color: var(--IDS-BADGE--INFO__BACKGROUND-COLOR);
-    border: var(--IDS-BADGE--INFO__BORDER);
-  }
-  &.ids-badge--attention {
-    background-color: var(--IDS-BADGE--ATTENTION__BACKGROUND-COLOR);
-    border: var(--IDS-BADGE--ATTENTION__BORDER);
-  }
-  &.ids-badge--success {
-    background-color: var(--IDS-BADGE--SUCCESS__BACKGROUND-COLOR);
-    border: var(--IDS-BADGE--SUCCESS__BORDER);
-  }
-  &.ids-badge--error {
-    background-color: var(--IDS-BADGE--ERROR__BACKGROUND-COLOR);
-    border: var(--IDS-BADGE--ERROR__BORDER);
-  }
-  &.ids-badge--secondary {
-    background-color: var(--IDS-BADGE--SECONDARY__BACKGROUND-COLOR);
-    border: var(--IDS-BADGE--SECONDARY__BORDER);
-  }
-
-  @media (min-width: breakpoints.$medium) {
-    height: 1.75rem;
-    padding: 0.375rem 0.5rem;
-    font-size: 0.875em;
-  }
-}

package/src/components/breadcrumbs/breadcrumbs-lit.ts

@@ -1,4 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-import BreadcrumbsSCSS from './breadcrumbs.scss';
-
-export default css`${unsafeCSS(BreadcrumbsSCSS)}`;