@inera/ids-design 5.3.0 → 5.4.0

package/{themes → dist/themes}/reset.css

@@ -22,7 +22,7 @@ body.ids,
 body.ids {
   background-color: var(--IDS-COLOR-NEUTRAL-100);
   color: var(--IDS-COLOR-NEUTRAL-20);
-  font-family: var(--font-family_1);
+  font-family: var(--IDS-FONT-FAMILY-BASE);
   font-size: 1rem;
   min-height: 100%;
 }

package/global.d.ts

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

package/package.json

@@ -1,9 +1,26 @@
-{
-  "type": "module",
-  "name": "@inera/ids-design",
-  "version": "5.3.0",
-  "license": "SEE LICENSE IN LICENSE.md",
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "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"
+  }
+}

package/rollup/styleObjects.js

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,84 @@
+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

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

package/src/components/alert/alert.scss

@@ -0,0 +1,200 @@
+@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

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

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

@@ -0,0 +1,128 @@
+@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

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

package/src/components/badge/badge.scss

@@ -0,0 +1,55 @@
+@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

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