-
-
+
+
+
diff --git a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss b/src/tedi/components/helpers/option-content/option-content.component.scss
similarity index 90%
rename from src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss
rename to src/tedi/components/helpers/option-content/option-content.component.scss
index c237f7241..c03a4db65 100644
--- a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.scss
+++ b/src/tedi/components/helpers/option-content/option-content.component.scss
@@ -1,4 +1,4 @@
-.tedi-dropdown-item-value {
+.tedi-option-content {
display: flex;
gap: var(--dropdown-item-inner-spacing);
align-items: center;
@@ -9,7 +9,7 @@
align-items: flex-start;
>input[tedi-checkbox][type="checkbox"],
- >input.tedi-dropdown-item-value__radio,
+ >input.tedi-option-content__radio,
>.tedi-icon {
margin-top: calc((var(--body-regular-line-height) - var(--form-checkbox-radio-size-responsive)) / 2);
}
@@ -121,16 +121,16 @@ li[tedi-dropdown-item],
&[aria-selected="true"],
&.tedi-dropdown-item--selected {
- .tedi-dropdown-item-value__label,
- .tedi-dropdown-item-value__meta {
+ .tedi-option-content__label,
+ .tedi-option-content__meta {
color: inherit;
}
}
&:hover:not(.tedi-dropdown-item--disabled, [aria-disabled="true"]) {
- .tedi-dropdown-item-value__label,
- .tedi-dropdown-item-value__meta {
+ .tedi-option-content__label,
+ .tedi-option-content__meta {
color: inherit;
}
}
@@ -138,13 +138,13 @@ li[tedi-dropdown-item],
&[aria-disabled="true"],
&.tedi-dropdown-item--disabled {
- .tedi-dropdown-item-value__label,
- .tedi-dropdown-item-value__meta {
+ .tedi-option-content__label,
+ .tedi-option-content__meta {
color: inherit;
}
}
- &:has(.tedi-dropdown-item-value--checkbox, .tedi-dropdown-item-value--radio) {
+ &:has(.tedi-option-content--checkbox, .tedi-option-content--radio) {
&[aria-selected="true"],
&.tedi-dropdown-item--selected {
@@ -159,7 +159,7 @@ li[tedi-dropdown-item],
}
&:hover:not(.tedi-dropdown-item--disabled, [aria-disabled="true"]) {
- .tedi-dropdown-item-value__radio {
+ .tedi-option-content__radio {
background-color: var(--form-checkbox-radio-default-background-hover);
border-color: var(--form-checkbox-radio-default-border-hover);
border-width: var(--tedi-borders-02);
diff --git a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.spec.ts b/src/tedi/components/helpers/option-content/option-content.component.spec.ts
similarity index 72%
rename from src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.spec.ts
rename to src/tedi/components/helpers/option-content/option-content.component.spec.ts
index 18e68fd36..d7c60b2a2 100644
--- a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.spec.ts
+++ b/src/tedi/components/helpers/option-content/option-content.component.spec.ts
@@ -1,16 +1,16 @@
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
-import { DropdownItemValueComponent } from "./dropdown-item-value.component";
+import { OptionContentComponent } from "./option-content.component";
-describe("DropdownItemValueComponent", () => {
- let fixture: ComponentFixture
;
+describe("OptionContentComponent", () => {
+ let fixture: ComponentFixture;
beforeEach(() => {
TestBed.configureTestingModule({
- imports: [DropdownItemValueComponent],
+ imports: [OptionContentComponent],
});
- fixture = TestBed.createComponent(DropdownItemValueComponent);
+ fixture = TestBed.createComponent(OptionContentComponent);
fixture.detectChanges();
});
@@ -23,7 +23,7 @@ describe("DropdownItemValueComponent", () => {
fixture.detectChanges();
const input = fixture.debugElement.query(
- By.css(".tedi-dropdown-item-value__checkbox"),
+ By.css(".tedi-option-content__checkbox"),
).nativeElement as HTMLInputElement;
expect(input.getAttribute("aria-hidden")).toBe("true");
@@ -35,7 +35,7 @@ describe("DropdownItemValueComponent", () => {
fixture.detectChanges();
const input = fixture.debugElement.query(
- By.css(".tedi-dropdown-item-value__radio"),
+ By.css(".tedi-option-content__radio"),
).nativeElement as HTMLInputElement;
expect(input.getAttribute("aria-hidden")).toBe("true");
diff --git a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.ts b/src/tedi/components/helpers/option-content/option-content.component.ts
similarity index 60%
rename from src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.ts
rename to src/tedi/components/helpers/option-content/option-content.component.ts
index 3b11efb64..24df637aa 100644
--- a/src/tedi/components/overlay/dropdown/dropdown-item-value/dropdown-item-value.component.ts
+++ b/src/tedi/components/helpers/option-content/option-content.component.ts
@@ -4,42 +4,42 @@ import {
input,
ViewEncapsulation,
} from "@angular/core";
-import { CheckboxComponent } from "../../../form/checkbox/checkbox.component";
+import { CheckboxComponent } from "../../form/checkbox/checkbox.component";
-export type DropdownItemValueType = "default" | "checkbox" | "radio";
-export type DropdownItemValueLayout = "horizontal" | "vertical";
+export type OptionContentType = "default" | "checkbox" | "radio";
+export type OptionContentLayout = "horizontal" | "vertical";
@Component({
- selector: "tedi-dropdown-item-value",
- templateUrl: "./dropdown-item-value.component.html",
- styleUrl: "./dropdown-item-value.component.scss",
+ selector: "tedi-option-content",
+ templateUrl: "./option-content.component.html",
+ styleUrl: "./option-content.component.scss",
standalone: true,
imports: [CheckboxComponent],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
- class: "tedi-dropdown-item-value",
- "[class.tedi-dropdown-item-value--vertical]": "layout() === 'vertical'",
- "[class.tedi-dropdown-item-value--horizontal]": "layout() === 'horizontal'",
- "[class.tedi-dropdown-item-value--checkbox]": "type() === 'checkbox'",
- "[class.tedi-dropdown-item-value--radio]": "type() === 'radio'",
+ class: "tedi-option-content",
+ "[class.tedi-option-content--vertical]": "layout() === 'vertical'",
+ "[class.tedi-option-content--horizontal]": "layout() === 'horizontal'",
+ "[class.tedi-option-content--checkbox]": "type() === 'checkbox'",
+ "[class.tedi-option-content--radio]": "type() === 'radio'",
},
})
-export class DropdownItemValueComponent {
+export class OptionContentComponent {
/**
- * Type of item value - controls selection indicator
+ * Type of option content - controls selection indicator
* - 'default': No selection indicator
* - 'checkbox': Shows checkbox (for multiselect)
* - 'radio': Shows radio button (for single select listbox)
* @default 'default'
*/
- readonly type = input("default");
+ readonly type = input("default");
/**
* Layout: 'horizontal' (side-by-side) or 'vertical' (stacked)
* @default 'horizontal'
*/
- readonly layout = input("horizontal");
+ readonly layout = input("horizontal");
/**
* Whether the item is selected (controls checkbox/radio state)
diff --git a/src/tedi/components/helpers/option-content/option-content.stories.ts b/src/tedi/components/helpers/option-content/option-content.stories.ts
new file mode 100644
index 000000000..f2c53bbe6
--- /dev/null
+++ b/src/tedi/components/helpers/option-content/option-content.stories.ts
@@ -0,0 +1,319 @@
+import { type Meta, type StoryObj, moduleMetadata } from "@storybook/angular";
+import { OptionContentComponent } from "./option-content.component";
+import { OptionContentLabelComponent } from "./option-content-label.component";
+import { OptionContentMetaComponent } from "./option-content-meta.component";
+import { IconComponent } from "../../base";
+import { VerticalSpacingDirective } from "../../../directives/vertical-spacing/vertical-spacing.directive";
+
+/**
+ * The OptionContent component provides a reusable structure for rendering option content
+ * in both Select and Dropdown components. It supports built-in checkbox/radio indicators
+ * and flexible layouts for label and meta text.
+ *
+ * ## Usage
+ *
+ * Use this component inside dropdown items or select options to render structured content
+ * with optional selection indicators.
+ *
+ * ### Basic usage
+ * ```html
+ *
+ * Option 1
+ *
+ * ```
+ *
+ * ### With meta text
+ * ```html
+ *
+ * Tallinn
+ * 3 timeslots
+ *
+ * ```
+ *
+ * ### With checkbox (multiselect)
+ * ```html
+ *
+ * Option 1
+ *
+ * ```
+ */
+
+export default {
+ title: "TEDI-Ready/Components/Helpers/OptionContent",
+ component: OptionContentComponent,
+ decorators: [
+ moduleMetadata({
+ imports: [
+ OptionContentComponent,
+ OptionContentLabelComponent,
+ OptionContentMetaComponent,
+ IconComponent,
+ VerticalSpacingDirective,
+ ],
+ }),
+ ],
+ argTypes: {
+ type: {
+ control: "radio",
+ options: ["default", "checkbox", "radio"],
+ description: "Type of selection indicator",
+ table: {
+ type: { summary: "OptionContentType" },
+ defaultValue: { summary: "default" },
+ },
+ },
+ layout: {
+ control: "radio",
+ options: ["horizontal", "vertical"],
+ description: "Layout of label and meta content",
+ table: {
+ type: { summary: "OptionContentLayout" },
+ defaultValue: { summary: "horizontal" },
+ },
+ },
+ selected: {
+ control: "boolean",
+ description:
+ "Whether the item is selected (controls checkbox/radio state)",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: "false" },
+ },
+ },
+ disabled: {
+ control: "boolean",
+ description: "Whether the item is disabled",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: "false" },
+ },
+ },
+ clipContent: {
+ control: "boolean",
+ description:
+ "`tedi-option-content-label` input. Whether the label clips overflowing content for text ellipsis. Set `false` when the label holds decorations that sit outside the line box (e.g. status indicator), so they are not cut off.",
+ table: {
+ type: { summary: "boolean" },
+ defaultValue: { summary: "true" },
+ },
+ },
+ },
+ args: {
+ type: "default",
+ layout: "horizontal",
+ selected: false,
+ disabled: false,
+ clipContent: true,
+ },
+} as Meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ parameters: { chromatic: { disableSnapshot: true } },
+ render: (args) => ({
+ props: args,
+ template: `
+
+ Option 1
+
+ `,
+ }),
+};
+
+export const WithMeta: Story = {
+ parameters: { chromatic: { disableSnapshot: true } },
+ name: "With Meta (Horizontal)",
+ render: () => ({
+ template: `
+
+ Tallinn
+ 3 timeslots available
+
+ `,
+ }),
+};
+
+export const Vertical: Story = {
+ parameters: { chromatic: { disableSnapshot: true } },
+ name: "Vertical Layout",
+ render: () => ({
+ template: `
+
+ Access to health data
+ Doctors will be able to see your health data
+
+ `,
+ }),
+};
+
+export const WithCheckbox: Story = {
+ name: "With Checkbox",
+ render: () => ({
+ props: {
+ selected: false,
+ },
+ template: `
+
+
+ Unchecked option
+
+
+ Checked option
+
+
+ Disabled option
+
+
+ Disabled checked option
+
+
+ `,
+ }),
+};
+
+export const WithRadio: Story = {
+ name: "With Radio",
+ render: () => ({
+ template: `
+
+
+ Unselected option
+
+
+ Selected option
+
+
+ Disabled option
+
+
+ Disabled selected option
+
+
+ `,
+ }),
+};
+
+export const WithIcon: Story = {
+ parameters: { chromatic: { disableSnapshot: true } },
+ name: "With Leading Icon",
+ render: () => ({
+ template: `
+
+
+
+ Desktop
+
+
+
+ Phone
+
+
+
+ Tablet
+
+
+ `,
+ }),
+};
+
+export const WithIconAndMeta: Story = {
+ name: "With Icon and Meta",
+ render: () => ({
+ template: `
+
+
+
+ Tallinn
+ 3 timeslots
+
+
+
+ Tartu
+ 5 timeslots
+
+
+ `,
+ }),
+};
+
+export const CheckboxWithMeta: Story = {
+ name: "Checkbox with Meta (Vertical)",
+ render: () => ({
+ template: `
+
+
+ Access to health data
+ Doctors will be able to see your health data
+
+
+ Access to medications
+ Doctors will be able to see your medications
+
+
+ `,
+ }),
+};
+
+export const AllVariants: Story = {
+ name: "All Variants",
+ render: () => ({
+ template: `
+
+
+ Default (Label only)
+
+ Option 1
+
+
+
+
+ Horizontal (Label + Meta)
+
+ Tallinn
+ 3 timeslots available
+
+
+
+
+ Vertical (Label + Description)
+
+ Access to health data
+ Doctors will be able to see your health data
+
+
+
+
+ With Checkbox (Multiselect)
+
+ Selected option
+
+
+
+
+ With Radio (Single select)
+
+ Selected option
+
+
+
+
+ With Leading Icon
+
+
+ Desktop
+
+
+
+
+ Full Example (Checkbox + Icon + Vertical)
+
+
+ Admin permissions
+ Full access to all features and settings
+
+
+
-
- Unchecked option
-
-
- Checked option
-
-
- Disabled option
-
-
- Disabled checked option
-
-
- `,
- }),
-};
-
-export const WithRadio: Story = {
- name: "With Radio",
- render: () => ({
- template: `
-
-
- Unselected option
-
-
- Selected option
-
-
- Disabled option
-
-
- Disabled selected option
-
-
- `,
- }),
-};
-
-export const WithIcon: Story = {
- parameters: { chromatic: { disableSnapshot: true } },
- name: "With Leading Icon",
- render: () => ({
- template: `
-
-
-
- Desktop
-
-
-
- Phone
-
-
-
- Tablet
-
-
- `,
- }),
-};
-
-export const WithIconAndMeta: Story = {
- name: "With Icon and Meta",
- render: () => ({
- template: `
-
-
-
- Tallinn
- 3 timeslots
-
-
-
- Tartu
- 5 timeslots
-
-
- `,
- }),
-};
-
-export const CheckboxWithMeta: Story = {
- name: "Checkbox with Meta (Vertical)",
- render: () => ({
- template: `
-
-
- Access to health data
- Doctors will be able to see your health data
-
-
- Access to medications
- Doctors will be able to see your medications
-
-
- `,
- }),
-};
-
-export const AllVariants: Story = {
- name: "All Variants",
- render: () => ({
- template: `
-
-
- Default (Label only)
-
- Option 1
-
-
-
-
- Horizontal (Label + Meta)
-
- Tallinn
- 3 timeslots available
-
-
-
-
- Vertical (Label + Description)
-
- Access to health data
- Doctors will be able to see your health data
-
-
-
-
- With Checkbox (Multiselect)
-
- Selected option
-
-
-
-
- With Radio (Single select)
-
- Selected option
-
-
-
-
- With Leading Icon
-
-
- Desktop
-
-
-
-
- Full Example (Checkbox + Icon + Vertical)
-
-
- Admin permissions
- Full access to all features and settings
-
-
-