No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Changelog

= Breaking change

7.0 2025-06-19

Changed

  • Dropdown is now inline block per default. sblock / mblock property moved from dropdown-content to dropdown component.
  • Link icons (sorry to say) have (due to a Firefox issue) again been moved around. You will have to add them yourself as spans within the a-tag and add appropriate classes.
  • Link arrow: The icon ids-icon-arrow-right-small has been removed. Replace it with ids-icon-arrow-right-small for all arrow links.
  • Puff list - due to accessibility reasons - no longer takes headline as a string. You now have to supply a ids-puff-list-item-header with optional a-tag inside. The slots have changed names to better reflect the content. If the whole puff list item should be a link, provide a link in the new slot called item-link and add the content and a ids-puff-list-item-header without a slot inside. CSS some divs have been added/rearranged.
  • Header 1177 has a new avatar when logged in. The avatar has a dropdown menu, and its own mobile menu. The mobile menu must therefore be duplicated (one instance for the navbar and one for the avatar) and put inside the avatar.
  • CSS Select multiple class ids-select-multiple__dropdown--hide has been renamed to ids-select-multiple__dropdown--show and its function has been inverted, to align with IDS patterns.
  • CSS Badge now has an inner wrapper ids-badge__inner.
  • CSS Box-link now has an inner wrapper ids-box-link__inner.
  • CSS Tag has moved its closable button to inside the ids-tag__content.
  • CSS Input wrappers have changed class names and the button for input type search has moved up one div, in order to support icons for all types of inputs.
  • CSS Stepper step content now has a class ids-step__content--expanded if it is expanded.
  • CSS Navigation local ids-navigation-local__link--active has changed name to ids-navigation-local-link--active.
  • CSS Dropdown ids-dropdown__link has change name to ids-dropdown-content-link".
  • CSS Header inera admin - ids-header-inera-admin__brand-text-slot has changed name to ids-header-inera-admin__brand-text-link.
  • Icon-region has changed name to Region-icon. It is now using the icon font, and has some new props.
  • Header-1177 has a new avatar which has a dropdown for the links, and supports acting agent radio buttons.
  • Header-1177 has a new component for the mobile menu ids-header-1177-menu-mobile, and is no longer placed inside the mobile navbar, but instead as one of the header items, in order to work together with the new avatar.
  • Header-1177 & Header-1177-pro are now using the new ids-region-icon component for region icons.
  • Header-1177-admin mobile avatar now uses ids-link for login/logout links.
  • Popover needs to add slot headline to the headline.
  • Tab no longer takes notifications and notices. Supply a notification badge of your choice using slot notification.
  • Notification badge can no longer be outlined. Instead they take a type (like badges).
  • Card no longer has options fill-1 and fill-2, instead you can set focuscard to true to get a highlighted background color, or fill for inera and inera admin.
  • Select no longer has a automatic aria-label that will e.g read "1 of 4".

6.2.1 - 2025-06-11

Bugfix

  • Form elements should now correctly remove aria-disabled when invalid changes to false or is removed.

6.2.0 - 2025-05-30

Added

  • A tertiary icon button.
  • Progressbar can now take a label which will be shown before the value.
  • Header patient, a patient header to combine with Header 1177 admin or Header inera admin.

Changed

  • CSS Progressbar has moved the label and gotten a new wrapper div (a11y).
  • CSS Range has new class names, where the wrapper has class ids-range and the input ids-range__input (a11y).

Bugfix

  • Missing CSS for header items in header inera and header inera admin is now added.
  • Header 1177 admin, Header 1177 pro and Header inera admin for angular, can now set the initial expanded state for the desktop avatars.
  • Error messages for radio buttons.
  • Buttons trigger a blur event if wrapper becomes disabled.

6.1.0 - 2025-04-30

Added

  • Select has a automatic aria-label that will e.g read "1 of 4" so that screen readers will articulate which option is selected of the total number of options in the list. Can be turned off with nooptiondescriber.
  • All icons (except for region icons) are now available in the Inera Design Icons font.
  • Links now have a prop nounderline.

Changed

  • Side menu does no longer support the mobile menu inside it. Remove the mobile menu and only use the side menu for all screen sizes. Also the hideonm is removed.
  • Inputs of type search will no longer automatically have a visible label. The label should still be provided, but it will be visibly hidden unless the user sets the new property showsearchlabel on the ids-input.

Bugfix

  • Invisible borders in side-panel removed.

6.0.3 - 2025-04-07

Bugfix

  • Race condition for setting slot attributes in mobile-menus within headers fixed.

6.0.3 - 2025-04-07

Bugfix

  • Race condition for setting slot attributes in mobile-menus within headers fixed.

6.0.2 - 2025-04-04

Bugfix

  • Side-menu footer now part of scrollable area.
  • CSS Link pseudo now have important icon font as font-family.
  • CSS Alert ribbon now has correct margin

6.0.1 - 2025-04-01

Bugfix

  • Dropdown link CSS adjusted.
  • Alert content text can again contain links.
  • Popover autofocus not active as default.
  • Dropdown content is now 100% only if set to mblock or sblock.
  • Dropdown position now works on desktop.
  • CSS Dropdown links now get white-space set by dropdown component.
  • Angular Container gutterless prop now updates in routes.

6.0.0 - 2025-03-28

Added

  • Icon font - We will be deprecating the icon components, and start using a font instead in the future.
  • Links, buttons, tabs, badges, inputs, and headers now support font-icons.

Changed

  • Tags clickable property removed. Use your own button instead.
  • Alert Global dismissible property removed. Not used.
  • The old header and footer are no longer supported.
  • Expandable is now called Accordion - and props have change names.
  • List is now called Puff list.
  • Button property search is gone. Use submit instead.
  • Dropdown and navigation content now use ids-link.
  • Dialog slot action is now called actions.
  • CSS New icon font used internally - affected components: Agent, Alert, Alert global, Breadcrumbs, Box link, Data pagination, Dialog, Dropdwon, Carousel, Check button, Checkbox, Data table, Error message, Headers, Footers, Input, Link, List pagination, Mobile menu, Navigation content, Popover, Puff list, Select, Select multiple, Side menu, Side panel, Stepper, Tabs, Tag, Time, Toggle.
  • CSS Card css structure is changed.
  • CSS Date-label now has class ids-date-label instead of ids-time.
  • CSS Header navbar links now need wrappers with correct class.
  • CSS Dropdown links now need wrappers with correct class.
  • CSS Header 1177 pro avatar has some new css classes.
  • CSS Side-panel footer links: each link needs to be wrapped in a div.
  • Angular Alert globals expanded property now called Collapsed.
  • Angular Alert type requires info to default. information not supported.

Bugfix

  • Popover focus-anchor should now work correctly.

5.5.0 - 2025-02-28

Added

  • Links have a new attribute called box.
  • Side menu has support for icons.

Changed

  • Side panel footer is now a part of the scrollable area.
  • CSS Alert has a new div called ids-alert__icon_and_text.
  • CSS Header 1177 has two new divs called ids-header-1177__inner-left and ids-header-1177__inner-right.
  • CSS Header 1177-pro has a new div called ids-header-1177-pro__items-inner.
  • CSS Header 1177-admin has a new div called ids-header-1177-admin__items-inner.
  • CSS Tabs has a new wrapper div called ids-tabs. Name changes: ids-tabs -> ids-tabs__tabs, ids-tab-panel -> ids-tabs__panel (USI-818).

Bugfix

  • The hamburger menu is less blurry.
  • USI-818 - Tabs should be accessible if there are a lot of them (wcag).
  • Dropdown content z-index added.
  • Headers will scale better when font size is increased up to 200% (wcag).

5.4.3 - 2025-02-13

Bugfix

  • Issue with focusing elements in dialogs triggered with scripts in Angular.

5.4.2 - 2025-02-11

Bugfix

  • Autofocus priority for dialogs restored.

5.4.1 - 2025-02-5

Bugfix

  • Dialogs triggered with scripts threw an error.

5.4.0 - 2025-01-31

Added

  • Side menu component.
  • Side panel component.
  • Badge can now have an icon.
  • Links now have a 3:rd preset color.
  • Mobile menu now has hover states.
  • List pagination now has a property that will allow the initial focus to be on the next-page-button.

Changed

  • Breadcrumbs: The current attribute is now a boolean, and is set on the crumb corresponding to the active page, and not on the parent component as before.
  • CSS Alert global has 2 more divs in its html structure to make it more responsive. The divs have classes ids-alert-global__header and ids-alert-global__icon-headline.
  • CSS Stepper has a rearranged html to make it more responsive. ids-step__indicator-wrapper is now a sibling of ids-step__button-text.
  • CSS Breadcrumbs should now use an arrow icon on mobile.
  • CSS List item no longer has a border-bottom. You need to add the ids-list-item-separator between each item.
  • Inera header & admin header: 4th column in navigation menu is now reserved for a puff text.
  • Inera admin footer: links now have color preset 3.

Bugfix

  • USI-780 - file icons hover state on buttons.
  • Range will now update correctly if min or max is changed.
  • Angular User icon now correctly registered.

5.3.1 - 2024-12-18

Bugfix

  • More missing icons added in header register.

5.3.0 - 2024-12-17

Added

  • Compact form elements for 1177-pro & inera-admin theme.
  • New logo for Jämtland Härjedalen.
  • Header items for all 1177 header can now also be buttons (not just links).
  • Dialog have a new slot actions rather than slotting them separately.

Changed

  • CSS Input type search: ids-input__prepend-icon is now ids-input__search-icon since it only applies to input type search.
  • CSS Input of type time has updated html structure and css classes.

Bugfix

  • Select multiple with required checkboxes should now show invalid styles correctly.
  • Tab panels with ids should now link correctly to the tab.
  • Missing icon imports in headers are now included.

5.2.1 - 2024-12-04

Bugfix

  • Radio and checkboxes should now have correct look when label is multiple lines.
  • Uppsala and Västra götaland icons should now render correctly in angular and react.

5.2.0 - 2024-12-02

Added

  • Header Inera & Header Inera Admin can now also have buttons as header items.

Changed

  • Dialog autofocus is always on. Property removed.
  • Dialog autofocus headline instead of close button (if headline is focusable).
  • Alert-global property expanded now called collapsed.
  • Input type search will no longer have a cancel button.
  • default text color changed from black to --IDS-COLOR-NEUTRAL-20.
  • CSS Headings have new class names:
    ids-heading-1 > ids-heading-xxl,
    ids-heading-1 ids-small > ids-heading-xl,
    ids-heading-2 > ids-heading-m,
    ids-heading-3 > ids-heading-s,
    ids-heading-4 > ids-heading-xs
  • CSS Class ids-select-wrapper is now called ids-select-multiple-wrapper, ids-select in the same component is called ids-select-multiple__select.
  • CSS Checkboxes must now have a wrapper with class ids-checkbox.
  • CSS Radios must now have a wrapper with class ids-radio.
  • CSS Textarea must now have a wrapper with class ids-textarea.
  • CSS The toggle has all new HTML structure and CSS classes.
  • CSS Data tables now follow the same pattern for state classes as other components.

Bugfix

  • CSS Scrollbar hover design.
  • CSS 1177 Header navbar hover design.
  • CSS Tag background color.
  • CSS Alert margin and sizes.
  • CSS Form tooltip adjustment.
  • CSS Breadcrumb separators no longer get link styles.
  • CSS USI-725 data tables are no longer transparent on hover.
  • Angular Dialog focus loop is now working correctly with the new id-button.

5.1.2 - 2024-11-07

Changed

  • Header nav items have slightly smaller padding to accommodate many nav-items.

Bugfix

  • Button should now be able to handle unknown elements.

5.1.1 - 2024-11-05

Changed

  • Link underlined property is now working again.
  • Dropdown item will no longer be able to have an active state.
  • CSS 3 classes and their elements removed: ids-linkiconwrap, ids-header-1177itemsitem-dropdowncontent-item, ids-header-1177-proitemsitem-dropdowncontent-item.
  • List pagination emit events now only outputs strings

Bugfix

  • 1177 header-nav box-shadow now shows correctly.
  • Mobile menu in 1177 header should not appear transparent.
  • Angular Links now supports pipes.
  • Angular Link light is now a boolean.
  • USE-716 - scrollbar

5.1.0 - 2024-10-31

Added

  • List now has 2 new props: time och showtime.
  • List pagination component.
  • Data pagination component.
  • Inera and Inera Admin header components.
  • Stepper has a new event didToggleExpansion.
  • Dropdown component.
  • CSS Inera Header CSS.
  • CSS Ul Lists and OL Lists. Classes: ids-bullet-list & ids-numbered-list
  • CSS Stepper CSS.
  • CSS Tooltip CSS.
  • CSS Navigation-content CSS.
  • CSS Navigation-local CSS.
  • CSS New background classes ids-bg-1 & ids-bg-2.
  • CSS Description list.
  • Angular Steppers step expanded property now supports two way binding.

Changed

  • Button component now requires a button element. Unnecessary styling properties removed.
  • Link component refactored. No longer uses slots.
  • Navigation-local now accepts simple a instead of ids-link.
  • Popover content property visible is now called show.
  • Popover trigger must now be a button or any other focusable element.
  • Tag has a updated look.
  • Badge has an updated look.
  • CSS Link CSS moved to global styles (no import needed).
  • CSS Button CSS moved to global styles (no import needed).
  • CSS Tabs CSS is now splitted into 3 files.
  • CSS Uppercase headings are no longer supported. Heading-5 now looks like heading-3 & heading-6 now looks like heading-4.
  • Angular Footers are now standalone components.

Bugfix

  • Link active icons should now have correct color on on hover and focus.
  • Input invalid and disabled border should now look normal.
  • Headers z-index should now be placed above alert-global.
  • Radio buttons now also work in Firefox.
  • Focus trap for popover should now include close button.
  • Angular 1177-Header no longer renders borders for desktop items in mobile mode.

5.0.3 - 2024-10-08

Bugfix

  • Header Avatar renders correctly without unit supplied.

5.0.2 - 2024-10-01

Bugfix

  • Problems with mobile menu and table css z-position fixed.
  • header-1177-pro nav has correct width and reacts to fluid.

5.0.1 - 2024-09-30

Bugfix

  • Alert ribbon should not be affected by automatic compact mode.

5.0.0 - 2024-09-27

5.0 introduces a new 1177-pro footer and header component. The old 1177-pro header and footer are now named 1177-admin. For now, both 1177-pro and 1177-admin components share the same 1177-pro css theme. If you are using the ids-header or ids-footer, no change is required but we recommend changing to the theme specific header and footer. The ids-header and ids-footer will be deprecated and removed in a future release.

Added

  • Header standalone components for 1177, 1177-pro, 1177-admin.
  • Footer standalone components for 1177, 1177-pro, 1177-admin, inera and inera-admin.
  • CSS Header CSS for 1177, 1177-pro, 1177-admin.
  • CSS Footer CSS for 1177, 1177-pro, 1177-admin, inera and inera-admin.
  • CSS Data-table css.
  • CSS Popover css.

Changed

  • Dialog trigger property should now be a slot.
  • Popover property cathegory changed to category.
  • 1177 pro theme mobile-menu now has a transparent background, instead of white.
  • Card: property border is now bordertop.
  • CSS property ids-card__border--1 changed to ids-card__border-top--1.
  • Popover: property visible is now show.

Bugfix

  • ids-link anchor element should now be contained within the web component.
  • Gotland icon fixed.
  • Notification-badge border should not affect height.
  • Popover layout, and popover property category is now spelled category.
  • Card border now hidden when hideons or hideonm is active.
  • Time component hover state issue.
  • Card component border issue.
  • Expandable borderless issue.
  • Dialog width issue - you can now provide width and max-width independently from each other, e.g. width 43rem, maxwidth 80%.
  • Angular input icons position.
  • Angular shiled locked icon.

4.10.0 - 2024-05-29

Added

  • Alert ribbon property.
  • Button group break property to decide breakpoint.

Changed

  • Card interactive can now accept a link.
  • CSS Cards classes changed.

Bugfix

  • Cards do not hide overflow any more.
  • 1177 avatar user icon has correct color.
  • Angular link and link icon colors should now always have their color visible.

4.9.0 - 2024-05-17

Added

  • Range interval property for large spans.
  • Tooltip position property for manual positioning.
  • Button group justify position for horizontal alignment.
  • Card border property.

Changed

  • Card fill property is now broken into two border and fill and has more variations for 1177 and 1177-pro.
  • Card fill2 property is removed.
  • 1177 color tokens: secondary-90 and secondary-40 are now removed. Use Accent instead.
  • 1177-pro now have a blue theme instead of a red. Note that slotted elements might need manual change.
  • CSS Card fill and border classes are changed. See examples.

Bugfix

  • Changed border color of error alert.
  • Rare popover crashes should not occur in Angular anymore.

4.8.1 - 2024-05-02

Bugfix

  • Expandable aria-expanded now displays correct state when false.
  • List item should now colorize arrow-icon.
  • Screen readers should now read alert headline if slotted element is a heading.

4.8.0 - 2024-04-29

Added

  • Header now has skip-to-content slot for skip link.
  • Card hideonm and hideons property for hiding card wrapper on smaller screens.
  • Textarea autosize property for automatic vertical textarea sizing.
  • Textarea block property is back.

Changed

  • Links append icon now aligns to the first row.
  • CSS Active icons inside links now have an additional wrapper.

Bugfix

  • Button for 1177 now have correct font.
  • Autofocus for form-elements should now work.
  • Textarea hint placement fixed.
  • CSS ids-time conflict with date-label is now resolved.

4.7.3 - 2024-04-17

Added

  • Better support for jsdom environment.

4.7.2 - 2024-04-16

Bugfix

  • Tooltip slots for checkboxes and radio buttons should now render correctly.
  • Graphic bug for error message speech bubble on certain zoom levels fixed.

4.7.1 - 2024-04-12

Bugfix

  • File-CSV, Form-numbered-reoccurring now applies correct colors on Inera theme.
  • Error message CSS now have updated warning icon.

4.7.0 - 2024-04-12

This release moves the majority of Form CSS from the Web Components to the global IDS CSS. Allowing it to manipulate the form elements in the light dom directly rather than via slots. Minimizing redundant CSS and decreasing bundle sizes.

Added

  • New icons: File-CSV, Document, Share, Headphones, Flag, Alarmclock-neutral, Alarmclock-inactivity, Activity, Switch-person, Denied, Hourglass, Hourglass-start, Hourglass-end, Form-numbered, Form-numbered-reoccurring, Email-sent, Email-unread, Moment-start, Moment-stop, Archive, Download.
  • Added Range CSS.
  • Added Textarea CSS.
  • Added Toggle CSS.
  • Added Time CSS.
  • Headline slots for Agent, Global Alert and Alert.
  • Expandable opens with Enter.
  • Angular Added srlabel property for button.

Changed

  • Updated icons: Attention, Information, Warning, Search, Visibility, Arrow
  • Dynamic icon (ids-icon/id-icon/IDSIcon) is now removed.
  • Select multiple label prop changed to labeltext.
  • Form valid property is now changed to invalid and accepts a boolean instead of a string.
  • Range, Textarea and Toggle related css-properties have changed names.
  • Textarea Fade effect removed. Property nofade is removed.
  • Errormessage is now an inline-block.
  • Form element event onValidation is now two events onValid and onInvalid.
  • CSS .ids-alert-global__headline is now a wrapper rather than the class of the headline.

Bugfix

  • Error messages aria-describedby should now switch correctly between hint and error-message.
  • Tabpanel relative and z-index wrapper now removed.
  • Tab role="tablist" now only wraps tabs, not panels.
  • Checkboxes that are light now have correct invalid style.
  • Alert no longer render empty h1 if slot is provided.
  • CSS Expandable class ids-expandable__icon--closed now works as intended.
  • Angular Tabs default slot and Tabpanel properties present again.
  • React IDSIconX is now imported correctly in api.

4.6.3 - 2024-03-22

Added

  • New tooltip slot for form elements.

4.6.2 - 2024-03-21

Added

  • Header-avatar has two new events expanded & closed.
  • Angular Header-avatar and Header-mobile-menu expanded property now supports data binding.

Changed

  • ids-header-mobile-menu didToggleExpansion event replaced by expanded and closed event.

4.6.1 - 2024-03-20

Bugfix

  • ids-header-mobile-menu expanded state is now reflected in the property.

4.6.0 - 2024-03-14

4.6 Is a huge patch for Angular users. IDIcon, IDLink and other classes representing elements are now removed in order to accommodate scaling and a smaller bundle size. Icons should now be imported individually. Creating components with objects like IDLink and IDHeaderItem is replaced with a more familiar component-based approach. Affected components: Alert Global, Breadcrumbs, Button, Footer, Icon (Shouldn't be used), Header, Mobile-menu, Link, Tabs.

Added

  • CSS Expandable icons can now easier be managed with classes ids-expandable__icon--closed and ids-expandable__icon--expanded.
  • Angular Icons component.
  • Angular Icon-region component.
  • Angular Components representing old classes in @inera/ids-angular/common.

Changed

  • 1177-pro Header avatar unit text is slightly smaller.
  • Angular Breadcrumbs no longer use links and mobilelink. Use id-crumb component instead.
  • Angular Button no longer use iconobject. Use individual icons instead.
  • Angular Header no longer use IDHeaderAvatar, IDHeaderItem, IDHeaderNavItem. Instead use components: id-header-mobile-menu, id-header-item, id-header-mobile-item, id-header-nav, id-header-nav-item, id-header-avatar.
  • Angular Mobile Menu no longer use items. Use id-mobile-menu component instead.
  • Angular Link no longer use prependiconor appendicon. Use individual icons instead.
  • Angular Tabs no longer use items. Use id-tab component instead.

Bugfix

  • H1 small has correct color in 1177-pro.
  • Header avatar for 1177-pro now aligns correctly.
  • Alert chevrons now registers correctly.
  • Popover scrollbar renders correctly.
  • Form spinner live now handles property correctly in aria-live.

4.5.1 - 2024-03-01

Bugfix

  • 1177 header avatar on safari now renders correctly.
  • Button is disabled if loading is true.
  • Angular Icon Ostergotland now renders correctly.
  • Angular Icon Twitter now renders correctly.

4.5.0 - 2024-02-28

Added

  • Button has new loading property.
  • Form Spinner added to CSS.
  • Form Spinner light property.
  • Tab now have a compact property, removing space between tab and panel.

Changed

  • Tabs have slightly different style.
  • Links' appended icon will now be placed behind last sentence if link is multi-lined.
  • Focused links will now have a hover effect.
  • 1177-pro Service name text used with Brand Text Top/bottom is now 24px (was 30px).
  • Notification badge style for Inera changed.
  • CSS Appended CSS icon class .ids-link__icon is now a child of .ids-link__text. See examples.

Bugfix

  • 1177 header avatar on mobile is now 100%.
  • Select chevron no longer interfere with click event.
  • Input light now works.
  • Footer linkcol value auto should now apply correctly.
  • Radio disabled border should now render correctly.
  • Expandable Chevron is now correctly rotated if expanded on first render.

4.4.3 - 2024-02-18

Bugfix

  • Expandable expansion now works correctly.

4.4.2 - 2024-02-15

Bugfix

  • List registers chevron correctly in core.
  • List-item ignores interactive text if slot is provided.

4.4.1 - 2024-02-14

Added

  • Angular Tabs now have access to onTabChange event.

Bugfix

  • Button text and icon now have a gap.
  • Tabs tabChange event will only trigger if tab is actually changed, not on click.

4.4.0 - 2024-02-14

Important information for Angular users

@inera/ids-angular internal structure is changed to accommodate tree shaking. All components and modules are moved into @inera/ids-angular/components/*. Classes, interfaces and internally used components are moved to @inera/ids-angular/common.

Resulting in imports like this:

import { IDHeaderModule, IDIconModule, IDLinkWeb, IDHeaderItem, IDHeaderAvatar, IDLinkModule, IDMobileMenuItem, IDHeaderNavItem, IDIcon} from 'ids-angular';

Have to be refactored to:

import { IDHeaderModule } from '@inera/ids-angular/components/header';
import { IDIconModule } from '@inera/ids-angular/components/icon';
import { IDLinkModule } from '@inera/ids-angular/components/link';
import { IDMobileMenuItem, IDLinkWeb, IDHeaderItem, IDHeaderAvatar, IDHeaderNavItem, IDIcon } from '@inera/ids-angular/common';

Added

  • Checkbox, Error Message, Radio, Input are now available as CSS.
  • Alert has a new headline slot.
  • Notification badge is now available in header-navigation-item.
  • List has new nocontent property to display headline-only list-items.
  • Tabs default slot now available between tabs and panel. Allowing you to show the same element on top of every panel.
  • Header now has a header-top slot for rendering content inside header-tag. Above header.
  • Chat and Prescription icon.
  • Expandable has 2 new events closed and expanded.
  • Dialog has 1 new event open.
  • Angular Expandable property expanded now supports two way data binding.
  • Angular Dialog property show now supports two way data binding.
  • Angular IDLinkRoute now accepts a NagivationExtra object.

Changed

  • Links without an icon will have underlined="true" automatically.
  • Checkbox margins are now only present if used in a checkbox group.
  • Checkbox compact property is now removed.
  • Notification badge font-weight is now normal.
  • Toggle Label is now on the right side of the toggle-switch.
  • Size of search button text is now bigger.
  • Buttons can now be used with any input.
  • Grid selectors have been changed from .ids .col-x to .ids-col-x.
  • Angular IDListItem and IDListItemInfo Module removed, components included in IDListModule.
  • CSS List has a now a new body div around content.

Bugfix

  • Multi-text-lined buttons should now scale correctly.
  • Header items with links should now have their focus-outline back.
  • Footer linkcol property now correctly sets the width of the link columns.
  • Dialog now hides (and restores scrollbar) if it disconnects from DOM.
  • Dialog can now correctly be turned off with a property change in angular.
  • Secondary button height is now the same as primary.
  • Tertiary button disabled now have correct style.
  • List headline slot is now back.
  • List is correctly registering chevron icon.
  • Textarea inline style width is now always set to initial width if nofade="false" (default).
  • Expandable can now have it's state set programatically.
  • Dialog button gap decreased to 20px from 40px in desktop mode.
  • Angular Textarea now has a new block property allowing it to be 100% width.
  • Angular IDLinkRoute executes internal click function and includes extra correctly as an argument to navigate function.

4.3.0 - 2024-01-15

In order to support the usage of components in isolation, some changes have been done to the internal structure of ids-design.

Theme tokens (CSS-properties), previously found inside each theme.css file, are now placed in their own theme-tokens.css file. Enabling the registration of theme-tokens without including component tokens and related css (including reset, global and util classes) in your stylesheet. All components will also have their tokens extracted into their own file. Making it possible to only register the components you need.

This does not require any changes on the consuming end.

Added

  • Tabs, List and Notification-badge CSS now avaible.
  • Disabled state for select multiple.
  • Headline slot for expandable.
  • ids-divider class for hr-tag, ensuring correct color.
  • Angular IDHeaderAvatar now have a new hide property.
  • Angular IDLink now have a new arialabel property.

Changed

  • 1177 CSS properties have changed names and is now using the same system used in the Inera theme.
  • Alert CSS Theme Tokens are now separated into token files.
  • Notification-badge size is smaller.
  • Mobile menu focus outline is now more evident.
  • Inera alert corners are now sharper.

Bugfix

  • Checkboxes now reflect compact property.
  • Notification-badge sizes removed.
  • justify-content: start changed to flex-start.
  • Attention icon viewbox no longer clips bottom.
  • Breadcrumbs that span two rows now wrapped.
  • Angular Expandable variation 2 now renders correctly.
  • Angular Card fill2 property now works correctly.
  • Angular Alert rendering should now be more resilient to state changes.
  • Inera Heading 6 and Preamable should now have correct weight and colors.

4.2.0 - 2023-12-01

Added

  • Hint slot to input and textarea.
  • Progressbar CSS.
  • Tag CSS.
  • Progressbar is now responsive.

Changed

  • Alert compact wraps text around icon on mobile.
  • Tags are slightly taller.

Bugfix

  • Secondary icon now has correct color on hover.
  • Badge neutral now have its border back.
  • Button blocks with icons now aligns correctly.
  • Textarea fade now updates correctly if textarea is resized.

4.1.2 - 2023-11-27

Removed

  • Dialog closed event.detail.reason removed.

Changed

  • Dialog persistent property now also prevents closing with ESC button.

Bugfix

  • Dialog should not emit closed event on render and should only emit once when closed.
  • Footer sub-footer should now align correctly to the center.
  • Header 1177 desktop avatar links are now get underlined via slot.

4.1.1 - 2023-11-27

Added

  • Dialog closed via property change should now be handled the same way as internal close button.

4.1.0 - 2023-11-27

Added

  • Typography classes now include responsivity.
  • Icon for X.
  • Dialog CSS.
  • Dialog property keepscrollbar now keeps old behavior and scrollbar on body.
  • Expandable children now requires class ids-expandable--child to ensure correct styling.

Changed

  • Dialog now hides body scrollbar by default.
  • Internal HTML for Dialog component.
  • 1177 link color preset 2 is now slightly darker.
  • Twitter icon now has the same icon as X.
  • List link chevron are now bigger and have slightly less space between self and text.
  • Negative margins removed from header items on narrow mode.
  • Radio buttons are now aligned to top if text is multiline.
  • Mobile menu avatar shadow is now removed.
  • CSS - Footer: div.ids-footer__sub-footer-mobile-service-name is now the wrapper for service name on mobile.

Bugfix

  • Button properties mBlock and sBlock now works again.
  • 1177-pro header avatar (desktop) chevron is now visible.
  • Tertiary Icons should now have correct hover color.
  • Footer links with 14px font-size should now be set correctly.
  • Fixed ids-links that are clickable outside the area in footers.
  • Footer padding around logo on 1177/1177-pro mobile is now back.

Removed

  • CSS - Alert: div.ids-alert__inner is no longer needed.
  • Dialog headline is now removed. Can be supplied via slot instead.
  • ids-dialog-actions is now removed. Can be supplied via slot instead.

4.0.0 - 2023-11-16

With 4.0 we introduce a brand new ids package called ids-design, which will be downloaded automatically. Which now holds all of the IDS CSS. This makes it possible for developers to use IDS without the need to use the Web Components. Expanding IDS support for projects which can't use the components as is. Some CSS properties will continue to change until @inera/ids-design starts to include the design tokens.

Added

  • Brand new CSS for: Agent, Alert, Alert Global, Badge, Breadcrumbs, Button Group, Button, Card, Date-label, Expandable, Footer, Link, Mobile-menu.
  • Alert compact property.
  • Card fill2 property for 1177 themes.
  • Mobile menu 1177 have a new variation 2.
  • Mobile item have two new properties showtext and hidetext for aria-label in expandable buttons containing chevrons.
  • Angular Tabs can now be created with new IDTab object.

Changed

  • Theme files are now moved to @inera/ids-design
  • Table CSS moved to @inera/ids-design
  • Inner HTML for Agent, Alert, Alert Global, Badge, Breadcrumbs, Button Group, Button, Card, Date-label, Expandable, Footer, Link, Mobile-menu is changed to enable CSS compatibility.
  • 1177 Header avatar name is no longer faded if too long.
  • Expandables with multirow headlines should now be padded.
  • Links for 1177 now have correct color.
  • Buttons with icons are now handled automatically without nested col and row.
  • Mobile Menu design is overhauled.

Removed

  • Recommended Datepicker including the supplied css for duet-date-picker are removed.
  • Ineras legacy themes are no longer available.
  • Mega menu graphic from 1177 and 1177-pro.

Bugfix

  • Tab focus can now be shifted with arrow keys again.
  • Angular Dialog focus loop should now exclude trigger.
  • Angular Icons inside Links should not throw name error anymore.
  • Angular Footer should not render until type is resolved.
  • Angular Header items should now be clickable.

[3.1.3] - 2023-10-09

Bugfix

  • Links with long texts and icons should now align correctly regardless size.

[3.1.2] - 2023-10-09

Added

  • Global CSS variable --IDS__MAX-WIDTH for controlling ids-container max-width.
  • Badges are now responsive.

Changed

  • Checkboxes now have margin instead of relying on label to dictate margins.

Bugfix

  • Error thrown when dialog is hidden should now be resolved.
  • Alert headline now scales correctly on smaller screens.

[3.1.1] - 2023-10-03

Changed

  • Datepicker CSS updated.

Bugfix

  • Button tabindex now responds to disabled property changes.

[3.1.0] - 2023-10-02

Several issues with links have been addressed in this release. First of all, selecting an appropriate link color is now easier than ever by using 3 of the new color presets introduced. These color presets are now applied automatically when an ids-link is used inside another ids-component. Making it a lot easier to ensure their correct look and feel. Therefore, it's no longer needed to apply color, activeicon or other style defining properties when using ids-link inside another ids-component. Secondly, links used in header-items, the navbar and in regular ids-links will now present the correct target in the bottom left corner. They should also be read correctly in screen readers.


Added

  • A new Navigation Local component.
  • Custom headlines are now supported in Dialogs and List-item.
  • Select-multiple now have two new properties selectedlabel and multiselectedlabel.
  • Cards now have an interactive property.
  • Button groups are now responsive by default, but can be turned off with the new unresponsive property.
  • Link now have five new properties bold, hovercolor, light, active and colorpreset.
  • List-item have a new property interactive.

Changed

  • Select multiple now displays the amount of options selected and not the selected option text.
  • Links, Header items and header navigation items are now using the supplied link as the clickable and focusable element.
  • Links with icons in header within header-nav-items no longer need color and size properties.
  • Links now have underline on hover.
  • Links now change color on hover by default.
  • Link's line-height is now 1.5rem by default.
  • Link's prepend icon now changes color with the link on hover.
  • Buttons inside disabled ids-inputs are now independent and will have to be disabled independently.
  • Dialog edge gap between edge of screen and is now smaller on small devices.
  • Dialog scrollbar now have a padding.
  • Cards have an updated border for 1177 theme.
  • Search button and input are now separated on 1177 theme.
  • Disabled inputs have new style (1177).
  • Link property activeiconbackground is now removed. It's now based on the link color and hovercolor.
  • Angular Button onClick now emits the custom event from the Web component instead of a boolean.

Bugfix

  • Focus loop now re evaluates content each time dialog is shown. Ensuring it works every time even if content has changed.
  • Button groups no longer apply right margin to buttons.
  • Chevron icon is now centered.
  • Link icons should now be aligned correctly on top if link text spans over multiple lines.

[3.0.9] - 2023-08-23

Added

  • Row gets a new Gap property.

Bugfix

  • Links should now be clickable with Enter
  • Select options with long text will now overflow into an ellipsis.
  • Buttons can now be clicked with NumpadEnter.
  • HeaderAvatar maxwidth should now apply correctly on 1177 themes.

Changed

  • Alert global / Agent default show/hide text changed.
  • Notification badge size property removed.
  • Mobile menu unresponsive property removed.

[3.0.8] - 2023-06-21

Changed

  • Mobile menu items now have !important padding.

[3.0.7] - 2023-06-20

Changed

  • Mobile menu item links no longers requires slot="link" if it's a standard anchor tag.

[3.0.6] - 2023-06-20

Added

  • Card has a new property "lean".

Changed

  • Mobile menu item links now requires slot="link".
  • Mobile menu items now uses the slotted link as the clickable item and not a javascript link.
  • Borderless expandables now contains the same size. If expandables are used in Card, use new lean property on the card.
  • 1177, Mobile menu text is slightly bolder.
  • 1177, Tag (clickable) text is slightly bolder.
  • Select chevron no longer rotates.
  • Internal refactoring.

Bugfix

  • Expandables borderless state now updates correctly.

[3.0.5] - 2023-06-12

Added

  • Stepper component can now get a headline slotted.

[3.0.4] - 2023-06-08

Bugfix

  • Header brandlogotypes should now be registered correctly in header.

[3.0.3] - 2023-06-07

Bugfix

  • Inera admin header brand text is now inline.

[3.0.2] - 2023-06-07

Changed

  • Popover, Dialog and Tooltip now have a border.
  • Alert now centers short text if a headline isn't provided.
  • Östergötland now have a new icon.
  • Dialog now have a larger padding.
  • Dialog now scales better, supports a scrollbar and has a max-width.

Bugfix

  • Dialogs should not be larger than screen any more.

[3.0.1] - 2023-05-26

Added

  • Popover now requires autofocus="true" in order to autofocus content.
  • Dialog now supports autofocus="true" when displayed.

Changed

  • Internal usage of em changed to rem.
  • Compact on checkbox now removes margin around the checkbox.
  • Margin between checkbox and label is moved to label.

Bugfix

  • Expandables inside cards should now look correct.
  • Tooltips should now be centered if intersecting with top of viewport.
  • Dialog focustrap and focus should now work better if dialog is triggered by script rather than click on trigger element.

[3.0.0] - 2023-05-17

Angular now shares property names with Core and React. Resulting in all property names being lowercase. Minimizing administration, future development and documentation time. Angular events are now prefixed with ‘on’ just like React events.

We have made a complete overhaul of how we use icons. Splitting up the ids-icon component and icons.ts module into separate modules and components. Resulting in smaller production bundles and hopefully faster load times. This will only work if ids-icon isn't used (imported) anywhere in your project.


Added

  • All icons now have a corresponding component.
  • A new ids-region-icon component for dynamic rendering of regional icons.
  • Footer has a new slot sub-footer-mobile.
  • A new light property to input elements.
  • Header now have two new slots region and region-mobile.
  • Dialog now have a closed event.

Changed

  • HeaderItem no longer accepts icon as a property.

  • Tab no longer accepts icon as a property.

  • HeaderMobileItem (1177) no longer accepts icon as a property.

  • prop subheadline does not render on 1177-pro, servicename only renders in footer.

  • The default "service name drivs av" text is removed from 1177-pro & inera-admin footer.

  • Header prop regionicontitle is removed. Is now applied directly to icon.

  • Expandables now have an updated style when expanded.

  • Örebro now have a new logotype.

  • Popover focus should now look better and have correct color.

  • Badge main color changed for inera theme.

  • Icon button should now have correct secondary colors.

  • list-item-info no longer requires any margin classes. Will be handled automatically.

  • Badge type main changed to primary.

  • Angular: All properties are now lowercase.

  • Angular: Buttons now accepts an icon as an property object instead of as a child.

  • Angular: Alert global now accepts an icon as an property object instead of as a child.

  • Angular: Tabs now accepts an entire icon in the icon property instead of just the icon name.

  • Angular: All events are now prefixed by "on".

  • Angular: maxWidth property on id-header, for avatar maxWidth, is now moved to the IDHeaderAvatar class.

Bugfix

  • React Tabs selected property should now work properly.
  • Buttons should now have correct height.
  • Fix where header fluid wouldn't be correctly applied on header sub-elements.
  • Alert close button svg should now throw an error anymore.
  • Angular Dialog properties persistent and dismissible should now work correctly.

[2.6.0] - 2023-04-19

Added

  • New Toggle component.
  • Footer link columns can now be 1, 2 or 3 with new cols property.
  • Alert can now be collapsed by default with new collapsed property.
  • Tertiary buttons now support icons.

Changed

  • Form elements with states disabled and invalid now have an updated look.
  • Error messages have an updated look.
  • Tertiary buttons padding is now a lot smaller.
  • Inera and Inera Admin footers now scale vertically better.
  • Sub-footer links are now slightly smaller.
  • Datepicker now have bigger visual difference between active month days and other month days.
  • Breadcrumb default value changed from "Brödsmulor" to "Du är här:"

Bugfix

  • 1177 agent banner should now have correct colors.
  • Stepper should now have correct styling.

[2.5.0] - 2023-03-24

Web and React components now share property names, minimizing administration and future development and documentation time. A lot of technical debt has also been addressed. However, there's more to be done and in the short term some refactoring will have to be done in order to ensure compatibility with this release.

Added

  • @inera/ids-react now includes type declarations.
  • Tabs are now responsive. Introducing 3 new properties responsive, unresponsive and selectlabel.
  • maxwidth property for header-avatar. Setting the max-width of username and unit.
  • Tabs now emits selected tab index when a tab is selected.
  • regionicontitle added to header. Which sets the title of the region icon for 1177 theme.

Changed

  • Irregularities in react with property names where some starts with a capital letter should now be fixed.
  • Property name changes:
    • Mobile-menu-avatar: servicename -> unit.
  • Slots moved to properties:
    • ids-header-avatar: slot="avatar-text" should now be supplied to new property unit.
  • No more hyphens in property names. For example: this-property -> thisproperty. (No action required for @inera/ids-angular users):
    • Alert Global: hide-mobile-icon.
    • Button: m-block, s-block.
    • Carousel: autoplay-delay
    • Column: m-offset, s-offset.
    • Dialog: no-overlay, no-focus-trap.
    • Form elements: no-validation.
    • Header: logo-href.
    • Header item: separator-left.
    • Textarea: no-fade.
    • Tab Panel: no-focus.
    • Select Multiple: max-height.
    • Popover content: max-width, max-height.
  • No more camelcase in properties (No action required for @inera/ids-angular users):
    • Header: brandTextTop brandText brandTexBottom
    • Form elements: autoFocus
  • Interface changes (Angular)
    • @inera/ids-angular Interface IDHeaderAvatarProp: serviceName changed to unit
  • Link size property now requires unit. Not px by default.
  • Tab internal prop value changed to index.
  • Dialog dismissible button should now align better to right side.
  • Accessibility changes.
    • Agent now has role="alert", not the global alert inside it.
    • Alert headline is now a h2.
    • Alert Global headline is now a h1.
    • Agent headline is not a h1.
    • Expandable variation 2 headline is now a h2.
    • 1177 avatar links are now underlined

Bugfixes

  • Rendering header sub-components after first load (like waiting for authentication to render ids-header-avatar) should now display them correctly.
  • Checkboxes with labels on two rows should now maintain their full size.
  • Select multiple selections will now be contained and not be displayed under the chevron.
  • Avatar username and unit name should now be aligned to the left.
  • Progressbar with 0% should now be completely empty.
  • valid on form groups should now correctly display error message.
  • select-multiple now has the same height as select.
  • ids-textarea wrapper is now inline block.
  • Avatar icon for 1177 and 1177-admin now have correct size.

[2.4.0] - 2023-03-10

Added

  • Stepper component.
  • Header logotype and brand text can now be turned into a link with the new logo-href and/or brand-text slots.

Changed

  • shield-locked-filled name changed to shield-locked-primary.
  • Supplying an unslotted link for the logo will no longer work.
  • Expandable clickable area is now a div with role="button".
  • Icons color1 and color2 are now reversed. 1177 icons should now have correct default colors when only one is used.
  • React Web component conversion updated to newer @lit-labs/react version. This dependency might require a reinstall.

Bugfix

  • Region Stockholm icon isn't cropped anymore.
  • Header navigation separator not visible if no navigationbar is present.
  • Some expected datatypes should now be correct.

[2.3.2] - 2023-02-28

Changed

  • 1177 default colors are now reversed.

[2.3.2] - 2023-02-27

Bugfix

  • Buttons are not active by default.

[2.3.1] - 2023-02-24

Changed

  • Minor changes in tag component.

[2.3.0] - 2023-02-24

Added

  • Carousel component.
  • Tag component.
  • Tabs now support notifications badges.
  • Checkboxes and checkbox-groups now have a compact property, decreasing the margin between checkboxes.
  • Select-multiple have a new max-height property, enabling setting the max-height of the dropdown.
  • Notification badge now have an outlined property.

Changed

  • All the icons are now slightly thicker.
  • Company icons are reworked.
  • Footer sub-headline is now a part of the headlines h1.
  • Util classes are now bound to root font size. em -> rem.

Bugfix

  • Angular Checkbox-group legends should now be visible.

[2.2.0] - 2023-01-30

Added

  • Fab button.
  • Icon button.
  • Alert component can now be collapsed with new property collapsable.
  • Textarea now have an property no-fade to remove the fading text effect when content overflows.

Changed

  • 1177 tabs now have an updated look.

Bugfix

  • Small button focus outline offset when used with icons fixed.
  • Textarea fade should now only be visible if content creates a scrollbar.
  • Dialog heading tag changed to h3 to enhance accessibility.

[2.1.2] - 2023-01-17

Added

  • Better support for lazy loading in Angular.

Bugfix

  • Header menu button now have correct outline in inera and inera-legacy theme.
  • Text in header sub-components should now scale better according to browser settings.

[2.1.1] - 2023-01-16

Changed

  • Tooltips now have a default z-index of 2.

Bugfix

  • Button focus outline should now be correctly spaced.
  • Search inputs with buttons should now have a correctly aligned clear button on mobile and desktop.

[2.1.0] - 2023-01-13

Changed

  • Typography rework. Old classes like .ids .h1 does not work anymore. Instead use ids-heading-1 etc.
  • ids-header-mobile-menu will now close if a child ids-link is clicked. persistent property added to header-mobile-menu to keep old behavior.

Bugfix

  • Tooltips should now be placed on bottom if the top overflows viewport.
  • Links with a href should now be able to be opened by right clicking.
  • Icons should not throw a style related error anymore.
  • Dialog now have an internal text-alignment to the left to the left.
  • Tooltips on ids-icon now uses aria-labelledby instead of aria-describedby.
  • Search inputs without buttons should now have a correctly aligned clear button.

[2.0.1] - 2022-12-14

Bugfix

  • Problem where component text wouldn't scale according to browser settings should now be fixed.

[2.0.0] - 2022-12-13

Added

  • New inera and inera-admin theme.
  • New icons, inera brand, search-inera, computer-inera.
  • Type removed from Mobile menu item.

Changed

  • Old inera and inera-admin theme are now named inera-legacy and inera-admin-legacy. This includes the type property is present in some components.
  • Type removed from refactored Mobile-menu-item component.
  • Angular Breadcrumbs property name change srlabel -> srLabel.

Bugfix

  • Icons shouldnt throw an error anymore.

[1.14.1] - 2022-11-28

Bugfix

  • Alert close icon should now be aligned correctly.

[1.14.0] - 2022-11-23

Added

  • Navigation-content component.
  • Tooltip component.
  • New icons (star, star-filled, swap, reload, reply, lightbulb, call, call-active, shield-locked, shield-locked-filled).
  • Icons can now set activeicon background color with new property activeiconbackground.

Changed

  • Icons active icon now has a 3px padding
  • Angular
  • Links activeicon changed to activeIcon.

[1.13.3] - 2022-11-15

Added

  • Popover-content now support a custom max-width and max-height.
  • Tab-panel content focus can now be turned off with no-focus.
  • Button custom color props now also support suffix hover.

[1.13.2] - 2022-11-08

Changed

  • Button color prop changed to backgroundcolor. color now affects text color. Both props are now accompanied by suffixes disabled and active for custom styling on those states.

[1.13.1] - 2022-11-08

Bugfix

  • Progressbar is now aligned with both edges during 100% completion.

[1.13.0] - 2022-11-08

Added

  • Badge component.
  • Popover component.
  • Progressbar component.

Changed

  • Alert headline is now set via a prop.
  • Alert styles are moved inside the shadowDom.
  • Input type Search now renders icons and is responsive.
  • Placeholder texts for form elements are now darker.
  • Buttons now are styled internally based on reflective attributes instead of classes.
  • Button dimensions now correlates with Figma sketches.
  • Button tabindex will not be overwritten if supplied.
  • Button color can now be changed by prop color, if really really needed.
  • Angular
    • Classes on id-col / id-row are now passed to the ids-col / ids-row.
    • Input icons are now supplied via a property.

Bugfix

  • Error message does not have a background color in the Inera and Inera Admin theme.
  • A supplied icon on an input should now render a right-hand padding.
  • A supplied icon on an input should now render disabled if the input is disabled.
  • Safari: Header avatar links for theme 1177 should now be spaced correctly.

[1.12.7] - 2022-10-19

Changed

  • Header nav-items are now more responsive.

[1.12.6] - 2022-10-13

Bugfix

  • Button groups now have correct directional margin based on RTL prop, even in Angular.

[1.12.5] - 2022-10-13

Bugfix

  • Button groups now have correct directional margin based on RTL prop.

[1.12.4] - 2022-10-12

Changed

  • Global-alerts headline is now set by using the headline property.

[1.12.3] - 2022-10-12

Bugfix

  • Name in header avatar should now be correctly aligned.

[1.12.2] - 2022-10-12

Bugfix

  • Header, Agent and Global alerts should now have correct layering

[1.12.1] - 2022-10-11

Bugfix

  • Expandables now get correct height if borderless in react.

[1.12.0] - 2022-10-11

Added

  • Expandable component.
  • Icon now have a Rotate property.
  • Footer link columns flex can now be set manually.

Changed

  • Cards are now blocks.

Bugfix

  • Disabled tertiary underline is removed.
  • Button groups now make sure slotted items get correct margin.

[1.11.1] - 2022-10-04

Bugfix

  • Tables styles now affect class="ids-table" and not other tables

[1.11.0] - 2022-10-03

Added

  • Button gets two new properties: tertiary and size.
  • Header responsiveness can now be turned off with new unresponsive property.

Changed

  • Reintroduced the speech bubble effect on 1177 error messages.

Bugfix

  • 1177 header avatar box should now have correct fade and width restrictions.
  • Button groups now centers buttons.

[1.10.0] - 2022-09-26

Added

  • Agent component.
  • Alert Global component now have an action slot.
  • Alert Global component now have a hide-mobile-icon property. Hiding the icon on medium and small.
  • no-validation property introduced to form components. Preventing internal validation to execute.
  • More util classes for small and medium screens.

Changed

  • Dialog now has better support for screen readers. Introducing the srclosetext property and more internal changes.
  • Dialog now locks focus between supplied elements.

Bugfix

  • Tabs with icons should now have correct height.

[1.9.1] - 2022-09-20

Added

  • Errormessages is now visible if valid="false" on default

Bugfix

  • Select now has correct error styling

[1.9.0] - 2022-09-19

1.9.0 introduces many changes. Grids will now support more breakpoints. Button, header and textareas can now fill entire width. Textareas and Inputs can now, just like checkboxes, render an invalid state by default.

The biggest change comes to the @inera/ids-react implementation where textarea, input now requires labels and form elements to be provided.

Added

  • New padding classes.
  • Grid ids-col now support two new breakpoints m (1024px) and s (640px).
  • Grid ids-col now support offset, m-offset and s-offset.
  • Button m-block and s-block will give more control over new prop block.
  • Header now supports fluid in order to fill entire width.
  • Textareas now support custom width.
  • Textareas and Input can render invalid as default.

Changed

  • Grid ids-col no longer support mobile. But instead uses m.
  • Button responsive is now replaced by block.

Bugfix

  • Textarea fade should now align to bottom.

[1.8.0] - 2022-09-13

Added

  • Card component.
  • Dialog component.

    Including:

    • Dialog-actions component.
  • Button now have a new responsive property.
  • New icons: id-card-locked, copy-file.

[1.7.1] - 2022-08-31

Bugfix

  • Grouped checkboxes now has styling on invalid.

[1.7.0] - 2022-08-30

Added

  • Table component.
  • Radio buttons and checkboxes are now styled when invalid.
  • Checkboxes can be set to valid="false" per default.

Bugfix

  • Autofocus should now work as intended.

Changed

  • 1177-pro header brand/unit texts are now correct tags and sizes.

[1.6.0] - 2022-08-19

Added

  • Breadcrumbs component.
  • h1 small Typography.

[1.5.1] - 2022-06-30

Added

  • Header (1177-pro) now accepts a brandtexttop and brandtextbottom property.

[1.5.0] - 2022-06-22

Added

  • Date label component.
  • List component.

Changed

  • Notification badge no longer support types.

Bugfix

  • Links should now render correctly in Angular.

[1.4.0] - 2022-06-08

Added

  • Tab component.

Changed

  • Input icons should now be placed in center of inputs.

[1.3.0] - 2022-05-31

Added

  • New 1177 profession theme.
  • New Inera admin theme.
  • Header component.

    Including:

    • Header avatar component.
    • Header item component.
    • Header navigation component.
    • Header navigation mobile item component.
    • Header mobile menu component.
  • Footer component.
  • Link component.
  • Mobile menu component.

    Including:

    • Mobile menu item component.
    • Mobile menu avatar component.
  • Notification-badge component.
  • Columns now support an offset value.

Changed

  • Button component emits own clicked event.
  • Date picker popup now has thematic colors.
  • Grid container have x-padding and gutterless property.
  • Size 'xs' on icons are now 14px instead of 15px.

[1.2.1] - 2022-03-15

Bugfix

  • Missing style error fixed.

[1.2.0] - 2022-03-15

Added

  • Container component.
  • Alert global component.
  • Icon component.

Changed

  • Chevron icon name change to chevron-bold.
  • Alert headline now supplied by supplying a h3. No longer by property.
  • Alert component close button now has configurable text
  • Alert component now accepts title for the icon.
  • All icons are now aria-hidden by default.

Bugfix

  • Button tabindex now being set earlier in lifecycle
  • Screen readers now read Alert headlines.

[1.1.1] - 2022-02-09

Bugfix

  • Input base bugfix (Angular bug)

[1.1.0] - 2022-02-09

Added

  • Row and column component.
  • Alert component.
  • Util classes.

Changed

  • Button component now have class indicating it's status. (Required for React)
  • Button component clicks self on 'Enter' and 'Space'
  • Button group component is now separated from button.

Bugfix

  • Error message now works with ids-select-multiple

[1.0.0] - 2022-01-25

Added

  • Button component.
  • Checkbox component.
  • Input component.
  • Radio component.
  • Range component.
  • Select component.
  • Select-Multiple component.
  • Spinner component.
  • Textarea component.
  • Time component.
  • Typography
  • Theme for 1177
  • Theme for Inera