@db-ux/mcp-server 4.6.1 → 4.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +182 -5
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -23596,7 +23596,7 @@ var EMPTY_COMPLETION_RESULT = {
|
|
|
23596
23596
|
// package.json
|
|
23597
23597
|
var package_default = {
|
|
23598
23598
|
name: "@db-ux/mcp-server",
|
|
23599
|
-
version: "4.
|
|
23599
|
+
version: "4.7.0",
|
|
23600
23600
|
type: "module",
|
|
23601
23601
|
description: "MCP server for DB UX Design System \u2013 gives LLMs access to UI components and code examples",
|
|
23602
23602
|
repository: {
|
|
@@ -23643,7 +23643,7 @@ var package_default = {
|
|
|
23643
23643
|
"npm-run-all2": "8.0.4",
|
|
23644
23644
|
tsx: "4.21.0",
|
|
23645
23645
|
typescript: "5.9.3",
|
|
23646
|
-
vitest: "4.1.
|
|
23646
|
+
vitest: "4.1.5"
|
|
23647
23647
|
},
|
|
23648
23648
|
publishConfig: {
|
|
23649
23649
|
registry: "https://registry.npmjs.org/",
|
|
@@ -23747,7 +23747,7 @@ function resolveSafePath(baseDir, userPath) {
|
|
|
23747
23747
|
}
|
|
23748
23748
|
|
|
23749
23749
|
// src/manifest.json
|
|
23750
|
-
var manifest_default = { icons: ["add_option", "air_condition", "air_condition_disabled", "airplane", "aisle", "aisle_not_available", "alarm_clock", "alarm_clock_plus", "alternative_connection", "arrow_down", "arrow_left", "arrow_right", "arrow_up", "arrow_up_right", "arrows_horizontal", "arrows_vertical", "artificial_intelligence", "artificial_intelligence_agent", "artificial_intelligence_text", "audio_description", "augmented_reality", "bahnbonus", "bahnbonus_card", "bahncard", "bahncards", "bar_chart", "battery", "battery_empty", "battery_full", "battery_half_empty", "bed", "bell", "bell_disabled", "beverage", "bicycle_reservation_required", "bicycle_space_not_determined", "bicycle_transport_not_available", "bike", "bike_trailer", "bin", "block", "boat", "booking", "bookmark", "brand", "breakfast", "bug", "bus", "calendar", "call_a_bike", "call_in_bus", "camera", "capacity_indicator_fully_booked", "capacity_indicator_high", "capacity_indicator_low", "capacity_indicator_moderate", "car", "car_sharing", "cargo_bike", "cash", "changeover", "chat", "check", "check_circle", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "childrens_compartment", "childrens_compartment_disabled", "cigarette_disabled", "circle", "circle_small", "circular_arrows", "circular_arrows_with_plus", "clapperboard", "clock", "clothes_hanger", "cloud", "cloud_download", "cloud_upload", "coach", "coach_sequence", "compass", "computer", "connection_path", "construction_sign", "copy", "couchette", "counter_clockwise_clock", "credit_card", "cross", "cross_circle", "crown", "cup", "database", "db", "db_wheelchair", "detachable_wheelchair", "devices", "discount", "discount_card", "discount_cards", "document", "document_check", "document_cross", "dog", "dots_drag_and_drop", "double_chevron_down", "double_chevron_left", "double_chevron_right", "double_chevron_up", "download", "ear", "ear_disabled", "electric_bike", "electric_car", "electric_cargo_bike", "electric_locomotive", "electric_scooter", "electric_wheelchair", "envelope", "euro_sign", "exclamation_mark_circle", "exclamation_mark_triangle", "eye", "eye_disabled", "face_delighted", "face_disappointed", "face_neutral", "face_sad", "face_smiling", "family_compartment", "family_compartment_disabled", "fast_backward", "fast_backward_10", "fast_backward_30", "fast_backward_empty", "fast_forward", "fast_forward_10", "fast_forward_30", "fast_forward_empty", "fax_machine", "finger_pushing_button", "fingerprint", "first_class", "folder", "folder_open", "fullscreen", "fullscreen_exit", "funnel", "gear_wheel", "generic_card", "gift", "globe", "grid", "hand_washing", "handcart", "head", "heart", "house", "ic_and_ec", "ice_portal", "ice_side_view", "id_card", "image", "information_circle", "key", "knife_and_fork", "knife_and_fork_disabled", "komfort_check_in", "komfort_check_in_check", "komfort_check_in_circle", "laptop", "leaf", "light_bulb", "line_chart", "link_chain", "list", "local_train", "location_arrow", "location_arrow_north", "location_crosshairs", "location_pin", "lock_closed", "lock_open", "log_in", "log_out", "long_distance_bus", "luggage_compartment", "luggage_rack", "magnifying_glass", "map", "map_pin", "market", "mask", "medical_cross", "megaphone", "menu", "microphone", "minus", "mixed_class", "mixed_class_reversed", "mobile_phone", "mobile_phone_disabled", "mobility_service_meeting_point", "monitor", "moon", "more_horizontal", "more_vertical", "my_journey", "navigation_straight", "navigation_to_left", "navigation_to_right", "navigation_u_turn", "nfc", "no_driving_zone", "no_parking", "notebook", "outward_journey", "paper_clip", "paper_plane", "paragraph_mark", "parking", "pause", "pedestrian", "pen", "person", "person_with_blind_cane", "person_with_rollator", "person_with_wheelchair", "persons", "pie_chart", "piggy_bank", "pin", "platform", "play", "plus", "power_socket", "printer", "profile_card", "pulse_wave", "qr_code", "qr_code_scan", "question_mark_circle", "quiet_zone", "quiet_zone_disabled", "rail_and_fly", "receive_item", "redo", "regio_guide", "reha_buggy", "remove_option", "replacement_service", "reservation", "resize", "resize_handle_corner", "restricted_mobility_toilet", "restricted_mobility_toilet_disabled", "return_journey", "road_sign", "round_trip", "s_bahn", "save", "scooter", "seat_not_determined", "seat_reservation_required", "seat_table", "seat_window", "second_class", "sepa", "share", "share_item", "shield", "shield_check", "ship", "shopping_bag", "shopping_basket", "shopping_basket_disabled", "shopping_cart", "shopping_cart_disabled", "shower", "shower_men", "shower_women", "single_trip", "skip_backward", "skip_forward", "sliders_horizontal", "snow_flake", "sort_down", "sort_up", "special_bike", "speech_bubble", "speech_bubble_exclamation_mark", "speech_bubble_question_mark", "speech_bubbles", "speedometer", "sprinter", "standing_room", "star", "start", "station", "stepless_entry", "stop", "stroller", "stroller_disabled", "subtitles", "subway", "suitcase", "sun", "support_dog", "tablet", "taxi", "telephone", "thumbs_down", "thumbs_up", "ticket", "ticket_commuter", "ticket_discount", "ticket_horizontal", "ticket_subscription", "tickets", "time_outward_journey", "time_return_journey", "timetable", "toilet_men", "toilet_women", "toilets", "toys", "toys_disabled", "train", "train_and_car", "train_station", "tram", "translation", "traveler_with_reduced_mobility", "undo", "unlink_chain", "upload", "vehicle_entry_aid", "vehicle_entry_aid_disabled", "volume_disabled", "volume_down", "volume_silent", "volume_up", "voucher", "walking_fast", "water_drop", "wc_sign", "wc_sign_disabled", "wheelchair_reservation_required", "wheelchair_space_not_available", "wheelchair_space_not_determined", "wifi", "wifi_disabled", "wrench", "x_placeholder", "zoom_in", "zoom_out"], components: { accordion: { props: `import { GlobalProps, InitializedState } from '../../shared/model';
|
|
23750
|
+
var manifest_default = { icons: ["add_option", "air_condition", "air_condition_disabled", "airplane", "aisle", "aisle_not_available", "alarm_clock", "alarm_clock_plus", "alternative_connection", "arrow_down", "arrow_left", "arrow_right", "arrow_up", "arrow_up_right", "arrows_horizontal", "arrows_vertical", "artificial_intelligence", "artificial_intelligence_agent", "artificial_intelligence_text", "audio_description", "augmented_reality", "bahnbonus", "bahnbonus_card", "bahncard", "bahncards", "bar_chart", "battery", "battery_empty", "battery_full", "battery_half_empty", "bed", "bell", "bell_disabled", "beverage", "bicycle_reservation_required", "bicycle_space_not_determined", "bicycle_transport_not_available", "bike", "bike_trailer", "bin", "block", "boat", "booking", "bookmark", "bordlift", "brand", "breakfast", "bug", "bus", "calendar", "call_a_bike", "call_in_bus", "camera", "capacity_indicator_fully_booked", "capacity_indicator_high", "capacity_indicator_low", "capacity_indicator_moderate", "car", "car_sharing", "cargo_bike", "cash", "changeover", "chat", "check", "check_circle", "chevron_down", "chevron_left", "chevron_right", "chevron_up", "childrens_compartment", "childrens_compartment_disabled", "cigarette_disabled", "circle", "circle_small", "circular_arrows", "circular_arrows_with_plus", "clapperboard", "clock", "clothes_hanger", "cloud", "cloud_download", "cloud_upload", "coach", "coach_sequence", "compass", "computer", "connection_path", "construction_sign", "copy", "couchette", "counter_clockwise_clock", "credit_card", "cross", "cross_circle", "crown", "cup", "database", "db", "db_wheelchair", "detachable_wheelchair", "devices", "discount", "discount_card", "discount_cards", "document", "document_check", "document_cross", "dog", "dots_drag_and_drop", "double_chevron_down", "double_chevron_left", "double_chevron_right", "double_chevron_up", "download", "ear", "ear_disabled", "electric_bike", "electric_car", "electric_cargo_bike", "electric_locomotive", "electric_scooter", "electric_wheelchair", "envelope", "euro_sign", "exclamation_mark_circle", "exclamation_mark_triangle", "eye", "eye_disabled", "face_delighted", "face_disappointed", "face_neutral", "face_sad", "face_smiling", "family_compartment", "family_compartment_disabled", "fast_backward", "fast_backward_10", "fast_backward_30", "fast_backward_empty", "fast_forward", "fast_forward_10", "fast_forward_30", "fast_forward_empty", "fax_machine", "finger_pushing_button", "fingerprint", "first_class", "flashlight", "folder", "folder_open", "fullscreen", "fullscreen_exit", "funnel", "gear_wheel", "generic_card", "gift", "globe", "grid", "hand_washing", "handcart", "head", "heart", "house", "ic_and_ec", "ice_portal", "ice_side_view", "id_card", "image", "information_circle", "key", "knife_and_fork", "knife_and_fork_disabled", "komfort_check_in", "komfort_check_in_check", "komfort_check_in_circle", "laptop", "leaf", "light_bulb", "line_chart", "link_chain", "list", "local_train", "location_arrow", "location_arrow_north", "location_crosshairs", "location_pin", "lock_closed", "lock_open", "log_in", "log_out", "long_distance_bus", "luggage_compartment", "luggage_rack", "magnifying_glass", "map", "map_pin", "market", "mask", "medical_cross", "megaphone", "menu", "microphone", "minus", "mixed_class", "mixed_class_reversed", "mobile_phone", "mobile_phone_disabled", "mobility_service_meeting_point", "monitor", "moon", "more_horizontal", "more_vertical", "my_journey", "navigation_straight", "navigation_to_left", "navigation_to_right", "navigation_u_turn", "nfc", "no_driving_zone", "no_parking", "notebook", "outward_journey", "paper_clip", "paper_plane", "paragraph_mark", "parking", "pause", "pedestrian", "pen", "person", "person_with_blind_cane", "person_with_rollator", "person_with_wheelchair", "persons", "pie_chart", "piggy_bank", "pin", "platform", "play", "plus", "power_socket", "printer", "profile_card", "pulse_wave", "qr_code", "qr_code_scan", "question_mark_circle", "quiet_zone", "quiet_zone_disabled", "rail_and_fly", "receive_item", "redo", "regio_guide", "reha_buggy", "remove_option", "replacement_service", "reservation", "resize", "resize_handle_corner", "restricted_mobility_toilet", "restricted_mobility_toilet_disabled", "return_journey", "road_sign", "round_trip", "s_bahn", "save", "scooter", "seat_not_determined", "seat_reservation_required", "seat_table", "seat_window", "second_class", "sepa", "share", "share_item", "shield", "shield_check", "ship", "shopping_bag", "shopping_basket", "shopping_basket_disabled", "shopping_cart", "shopping_cart_disabled", "shower", "shower_men", "shower_women", "single_trip", "skip_backward", "skip_forward", "sliders_horizontal", "snow_flake", "sort_down", "sort_up", "special_bike", "speech_bubble", "speech_bubble_exclamation_mark", "speech_bubble_question_mark", "speech_bubbles", "speedometer", "sprinter", "standing_room", "star", "start", "station", "stepless_entry", "stop", "stroller", "stroller_disabled", "subtitles", "subway", "suitcase", "sun", "support_dog", "tablet", "taxi", "telephone", "thumbs_down", "thumbs_up", "ticket", "ticket_commuter", "ticket_discount", "ticket_horizontal", "ticket_subscription", "tickets", "time_outward_journey", "time_return_journey", "timetable", "toilet_men", "toilet_women", "toilets", "toys", "toys_disabled", "train", "train_and_car", "train_station", "tram", "translation", "traveler_with_reduced_mobility", "undo", "unlink_chain", "upload", "vehicle_entry_aid", "vehicle_entry_aid_disabled", "volume_disabled", "volume_down", "volume_silent", "volume_up", "voucher", "walking_fast", "water_drop", "wc_sign", "wc_sign_disabled", "wheelchair_reservation_required", "wheelchair_space_not_available", "wheelchair_space_not_determined", "wifi", "wifi_disabled", "wrench", "x_placeholder", "zoom_in", "zoom_out"], components: { accordion: { props: `import { GlobalProps, InitializedState } from '../../shared/model';
|
|
23751
23751
|
import { DBAccordionItemDefaultProps } from '../accordion-item/model';
|
|
23752
23752
|
|
|
23753
23753
|
export const AccordionVariantList = ['divider', 'card'] as const;
|
|
@@ -33806,7 +33806,7 @@ import DBSection from "../section.vue";
|
|
|
33806
33806
|
<script setup lang="ts">
|
|
33807
33807
|
import DBCard from "../../card/card.vue";
|
|
33808
33808
|
import DBSection from "../section.vue";
|
|
33809
|
-
</script>` }, "web-components": { "density.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-density",\n})\nexport class SectionDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="functional"\n id="test-id-123"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="regular"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="expressive"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n </db-section>\n </Fragment>\n );\n }\n}\n', "spacing.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-spacing",\n})\nexport class SectionSpacing {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-spacing");\n }\n\n render() {\n return (\n <Fragment>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="medium"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="large"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="small"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="none"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n </db-section>\n </Fragment>\n );\n }\n}\n', "width.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-width",\n})\nexport class SectionWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="small"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="medium"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="large"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n </db-section>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBSection</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <section class="db-section">\n <div data-variant="full">Section</div>\n </section>\n </body>\n</html>\n' } } }, select: { props: "import {\n ChangeEventProps,\n ChangeEventState,\n ClickEventProps,\n ClickEventState,\n FocusEventProps,\n FocusEventState,\n FormMessageProps,\n FormProps,\n FormSizeProps,\n FormState,\n FromValidState,\n GlobalProps,\n GlobalState,\n IconProps,\n InitializedState,\n InputEventProps,\n InputEventState,\n ShowIconProps\n} from '../../shared/model';\n\nexport type DBSelectDefaultProps = {\n /**\n * @deprecated\n * Enables multiple select, but it isn't styled, please use DBCustomSelect/db-custom-select instead\n */\n multiple?: boolean;\n\n /**\n * If you don't/can't use children/slots you can pass in the options as an array.\n */\n options?: DBSelectOptionType[];\n\n /**\n * Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\n * By default, it is shown for non-required selects and hidden for required selects.\n * Set to `true` to always show or `false` to always hide the empty option.\n *\n * Note: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\n * Setting `showEmptyOption` alone has no effect if neither of these conditions is met.\n */\n showEmptyOption?: boolean;\n};\n\nexport type DBSelectOptionType = {\n /**\n * Identifier for option\n */\n id?: string;\n\n /**\n * Disables this option\n */\n disabled?: boolean;\n\n /**\n * Selects this option\n */\n selected?: boolean;\n\n /**\n * If the value is different from the label you want to show to the user.\n */\n label?: string;\n\n /**\n * If you want to use optgroup you can nest options here.\n */\n options?: DBSelectOptionType[];\n\n /**\n * The main value you select, will be shown as default label if no label is set.\n */\n value: string | string[] | number;\n};\n\nexport type DBSelectProps = GlobalProps &\n ClickEventProps<HTMLSelectElement> &\n ChangeEventProps<HTMLSelectElement> &\n FocusEventProps<HTMLSelectElement> &\n InputEventProps<HTMLSelectElement> &\n FormProps &\n IconProps &\n FormMessageProps &\n DBSelectDefaultProps &\n ShowIconProps &\n FormSizeProps;\n\nexport type DBSelectDefaultState = {\n _placeholderId: string;\n getOptionLabel: (option: DBSelectOptionType) => string;\n shouldShowEmptyOption: () => boolean;\n};\n\nexport type DBSelectState = DBSelectDefaultState &\n GlobalState &\n ClickEventState<HTMLSelectElement> &\n ChangeEventState<HTMLSelectElement> &\n FocusEventState<HTMLSelectElement> &\n InputEventState<HTMLSelectElement> &\n FormState &\n InitializedState &\n FromValidState;\n", examples: ["Density", "Variant", "Show Label", "Show Message", "State", "Validation", "Disabled", "Content", "Required", "Show Required Asterisk", "Option Groups", "Examples Floating Label"], exampleCode: { react: { "content.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectContent(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Text"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n icon="x_placeholder"\n placeholder="Text - Leading Icon"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectContent;\n', "density.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectDensity(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="functional"\n label="Label"\n placeholder="Functional"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectDisabled(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled\n />\n </div>\n </>\n );\n}\n\nexport default SelectDisabled;\n', "examples-floating-label.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectExamplesFloatingLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n value="Disabled"\n placeholder="Disabled"\n options={[\n {\n value: "Disabled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n disabled\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Invalid"\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectExamplesFloatingLabel;\n', "option-groups.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectOptionGroups(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Using optgroups"\n options={[\n {\n label: "Group 1",\n value: "",\n options: [\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n ],\n },\n {\n label: "Group 2",\n value: "",\n options: [\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n ],\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Mixed options and groups"\n options={[\n {\n value: "Single Option",\n },\n {\n label: "Grouped Options",\n value: "",\n options: [\n {\n value: "Group Option 1",\n },\n {\n value: "Group Option 2",\n },\n ],\n },\n {\n value: "Another Single Option",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectOptionGroups;\n', "required.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectRequired(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n />\n </div>\n </>\n );\n}\n\nexport default SelectRequired;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowLabel;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowMessage(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n message="Message"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n message="Message"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowMessage;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowRequiredAsterisk(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n showRequiredAsterisk\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n showRequiredAsterisk={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowRequiredAsterisk;\n', "state.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSelect from "../select";\n\nfunction SelectState(props: any) {\n const [example, setExample] = useState(() => null);\n\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n value="Filled"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectState;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectValidation(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n options={[\n {\n value: "Valid",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectVariant(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Above"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n value="Floating"\n placeholder="Floating"\n options={[\n {\n value: "Floating",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectVariant;\n' }, angular: { "content.example.ts": `import {
|
|
33809
|
+
</script>` }, "web-components": { "density.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-density",\n})\nexport class SectionDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-density");\n }\n\n render() {\n return (\n <Fragment>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="functional"\n id="test-id-123"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Functional\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="regular"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Regular\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n data-density="expressive"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Expressive\n </db-card>\n </db-section>\n </Fragment>\n );\n }\n}\n', "spacing.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-spacing",\n})\nexport class SectionSpacing {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-spacing");\n }\n\n render() {\n return (\n <Fragment>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="medium"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Medium\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="large"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="small"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n </db-section>\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n spacing="none"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n None\n </db-card>\n </db-section>\n </Fragment>\n );\n }\n}\n', "width.example.tsx": 'import { DBCard } from "../../card/card";\nimport { DBSection } from "../section";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "section-width",\n})\nexport class SectionWidth {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "section-width");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n (Default) Full\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="small"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Small\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="medium"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Medium\n </db-card>\n </db-section>\n </div>\n <div\n style={{\n width: "100%",\n display: "block",\n }}\n >\n <db-section\n class="db-color-informational db-bg-color-basic-level-2"\n width="large"\n style={{\n display: "grid",\n gap: "var(--db-spacing-fixed-sm)",\n gridTemplateColumns: "repeat(2, minmax(0, 1fr))",\n }}\n >\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n <db-card\n style={{\n inlineSize: "100%",\n }}\n >\n Large\n </db-card>\n </db-section>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBSection</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <section class="db-section">\n <div data-variant="full">Section</div>\n </section>\n </body>\n</html>\n' } } }, select: { props: "import {\n ChangeEventProps,\n ChangeEventState,\n ClickEventProps,\n ClickEventState,\n FocusEventProps,\n FocusEventState,\n FormMessageProps,\n FormProps,\n FormSizeProps,\n FormState,\n FromValidState,\n GlobalProps,\n GlobalState,\n IconProps,\n InitializedState,\n InputEventProps,\n InputEventState,\n ShowIconProps\n} from '../../shared/model';\n\nexport type DBSelectDefaultProps = {\n /**\n * @deprecated\n * Enables multiple select, but it isn't styled, please use DBCustomSelect/db-custom-select instead\n */\n multiple?: boolean;\n\n /**\n * If you don't/can't use children/slots you can pass in the options as an array.\n */\n options?: DBSelectOptionType[];\n\n /**\n * Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\n * By default, it is shown for non-required selects and hidden for required selects.\n * Set to `true` to always show or `false` to always hide the empty option.\n *\n * Note: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\n * Setting `showEmptyOption` alone has no effect if neither of these conditions is met.\n */\n showEmptyOption?: boolean;\n};\n\nexport type DBSelectOptionType = {\n /**\n * Identifier for option\n */\n id?: string;\n\n /**\n * Disables this option\n */\n disabled?: boolean;\n\n /**\n * Selects this option\n */\n selected?: boolean;\n\n /**\n * If the value is different from the label you want to show to the user.\n */\n label?: string;\n\n /**\n * If you want to use optgroup you can nest options here.\n */\n options?: DBSelectOptionType[];\n\n /**\n * The main value you select, will be shown as default label if no label is set.\n */\n value: string | string[] | number;\n};\n\nexport type DBSelectProps = GlobalProps &\n ClickEventProps<HTMLSelectElement> &\n ChangeEventProps<HTMLSelectElement> &\n FocusEventProps<HTMLSelectElement> &\n InputEventProps<HTMLSelectElement> &\n FormProps &\n IconProps &\n FormMessageProps &\n DBSelectDefaultProps &\n ShowIconProps &\n FormSizeProps;\n\nexport type DBSelectDefaultState = {\n _placeholderId: string;\n getOptionLabel: (option: DBSelectOptionType) => string;\n shouldShowEmptyOption: () => boolean;\n};\n\nexport type DBSelectState = DBSelectDefaultState &\n GlobalState &\n ClickEventState<HTMLSelectElement> &\n ChangeEventState<HTMLSelectElement> &\n FocusEventState<HTMLSelectElement> &\n InputEventState<HTMLSelectElement> &\n FormState &\n InitializedState &\n FromValidState;\n", examples: ["Density", "Variant", "Show Label", "Show Message", "State", "Validation", "Disabled", "Content", "Required", "Show Required Asterisk", "Option Groups", "Examples Floating Label", "Examples showEmptyOption property"], exampleCode: { react: { "content.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectContent(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Text"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n icon="x_placeholder"\n placeholder="Text - Leading Icon"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectContent;\n', "density.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectDensity(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="functional"\n label="Label"\n placeholder="Functional"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectDensity;\n', "disabled.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectDisabled(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled\n />\n </div>\n </>\n );\n}\n\nexport default SelectDisabled;\n', "examples-floating-label.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectExamplesFloatingLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n value="Disabled"\n placeholder="Disabled"\n options={[\n {\n value: "Disabled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n disabled\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Invalid"\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectExamplesFloatingLabel;\n', "examples-show-empty-option.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectExamplesShowEmptyOption(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default)"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="showEmptyOption=false"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showEmptyOption={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectExamplesShowEmptyOption;\n', "option-groups.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectOptionGroups(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Using optgroups"\n options={[\n {\n label: "Group 1",\n value: "",\n options: [\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n ],\n },\n {\n label: "Group 2",\n value: "",\n options: [\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n ],\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="Mixed options and groups"\n options={[\n {\n value: "Single Option",\n },\n {\n label: "Grouped Options",\n value: "",\n options: [\n {\n value: "Group Option 1",\n },\n {\n value: "Group Option 2",\n },\n ],\n },\n {\n value: "Another Single Option",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectOptionGroups;\n', "required.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectRequired(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n />\n </div>\n </>\n );\n}\n\nexport default SelectRequired;\n', "show-label.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowLabel(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowLabel;\n', "show-message.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowMessage(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n message="Message"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={false}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n message="Message"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowMessage;\n', "show-required-asterisk.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectShowRequiredAsterisk(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n showRequiredAsterisk\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required\n showRequiredAsterisk={false}\n />\n </div>\n </>\n );\n}\n\nexport default SelectShowRequiredAsterisk;\n', "state.example.tsx": '"use client";\nimport * as React from "react";\nimport { useState } from "react";\nimport DBSelect from "../select";\n\nfunction SelectState(props: any) {\n const [example, setExample] = useState(() => null);\n\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n value="Filled"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectState;\n', "validation.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectValidation(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n options={[\n {\n value: "Valid",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectValidation;\n', "variant.example.tsx": 'import * as React from "react";\nimport DBSelect from "../select";\n\nfunction SelectVariant(props: any) {\n return (\n <>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n placeholder="(Default) Above"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n />\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <DBSelect\n label="Label"\n variant="floating"\n value="Floating"\n placeholder="Floating"\n options={[\n {\n value: "Floating",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n />\n </div>\n </>\n );\n}\n\nexport default SelectVariant;\n' }, angular: { "content.example.ts": `import {
|
|
33810
33810
|
Component,
|
|
33811
33811
|
viewChild,
|
|
33812
33812
|
ElementRef,
|
|
@@ -34338,6 +34338,123 @@ export class SelectExamplesFloatingLabel implements AfterViewInit {
|
|
|
34338
34338
|
}
|
|
34339
34339
|
}
|
|
34340
34340
|
}
|
|
34341
|
+
`, "examples-show-empty-option.example.ts": `import {
|
|
34342
|
+
Component,
|
|
34343
|
+
viewChild,
|
|
34344
|
+
ElementRef,
|
|
34345
|
+
effect,
|
|
34346
|
+
AfterViewInit,
|
|
34347
|
+
} from "@angular/core";
|
|
34348
|
+
import { CommonModule } from "@angular/common";
|
|
34349
|
+
|
|
34350
|
+
import { DBSelect } from "../select";
|
|
34351
|
+
|
|
34352
|
+
@Component({
|
|
34353
|
+
selector: "select-examples-show-empty-option",
|
|
34354
|
+
standalone: true,
|
|
34355
|
+
imports: [CommonModule, DBSelect],
|
|
34356
|
+
template: \`<ng-container
|
|
34357
|
+
><div
|
|
34358
|
+
[ngStyle]="{
|
|
34359
|
+
width: '300px'
|
|
34360
|
+
}"
|
|
34361
|
+
>
|
|
34362
|
+
<db-select
|
|
34363
|
+
label="Label"
|
|
34364
|
+
placeholder="(Default)"
|
|
34365
|
+
[options]="[{
|
|
34366
|
+
value: 'Option 1'
|
|
34367
|
+
}, {
|
|
34368
|
+
value: 'Option 2'
|
|
34369
|
+
}, {
|
|
34370
|
+
value: 'Option 3'
|
|
34371
|
+
}, {
|
|
34372
|
+
value: 'Option 4'
|
|
34373
|
+
}, {
|
|
34374
|
+
value: 'Option 5'
|
|
34375
|
+
}]"
|
|
34376
|
+
></db-select>
|
|
34377
|
+
</div>
|
|
34378
|
+
<div
|
|
34379
|
+
[ngStyle]="{
|
|
34380
|
+
width: '300px'
|
|
34381
|
+
}"
|
|
34382
|
+
>
|
|
34383
|
+
<db-select
|
|
34384
|
+
label="Label"
|
|
34385
|
+
placeholder="showEmptyOption=false"
|
|
34386
|
+
[options]="[{
|
|
34387
|
+
value: 'Option 1'
|
|
34388
|
+
}, {
|
|
34389
|
+
value: 'Option 2'
|
|
34390
|
+
}, {
|
|
34391
|
+
value: 'Option 3'
|
|
34392
|
+
}, {
|
|
34393
|
+
value: 'Option 4'
|
|
34394
|
+
}, {
|
|
34395
|
+
value: 'Option 5'
|
|
34396
|
+
}]"
|
|
34397
|
+
[showEmptyOption]="false"
|
|
34398
|
+
></db-select></div
|
|
34399
|
+
></ng-container> \`,
|
|
34400
|
+
styles: \`:host { display: contents; }\`,
|
|
34401
|
+
})
|
|
34402
|
+
export class SelectExamplesShowEmptyOption implements AfterViewInit {
|
|
34403
|
+
_ref = viewChild<ElementRef>("_ref");
|
|
34404
|
+
|
|
34405
|
+
constructor() {}
|
|
34406
|
+
|
|
34407
|
+
/**
|
|
34408
|
+
* Passes \`aria-*\`, \`data-*\` & \`class\` attributes to correct child. Used in angular and stencil.
|
|
34409
|
+
* @param element the ref for the component
|
|
34410
|
+
* @param customElementSelector the custom element like \`my-component\`
|
|
34411
|
+
*/
|
|
34412
|
+
private enableAttributePassing(
|
|
34413
|
+
element: HTMLElement | null,
|
|
34414
|
+
customElementSelector: string
|
|
34415
|
+
) {
|
|
34416
|
+
const parent = element?.closest(customElementSelector);
|
|
34417
|
+
if (element && parent) {
|
|
34418
|
+
const attributes = parent.attributes;
|
|
34419
|
+
for (let i = 0; i < attributes.length; i++) {
|
|
34420
|
+
const attr = attributes.item(i);
|
|
34421
|
+
if (
|
|
34422
|
+
attr && attr.name !== 'data-density' &&
|
|
34423
|
+
(attr.name.startsWith("data-") || attr.name.startsWith("aria-"))
|
|
34424
|
+
) {
|
|
34425
|
+
element.setAttribute(attr.name, attr.value);
|
|
34426
|
+
parent.removeAttribute(attr.name);
|
|
34427
|
+
}
|
|
34428
|
+
else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
|
|
34429
|
+
element.setAttribute(attr.name, attr.value);
|
|
34430
|
+
parent.removeAttribute(attr.name);
|
|
34431
|
+
}
|
|
34432
|
+
else if (attr && attr.name === "class") {
|
|
34433
|
+
const isWebComponent = attr.value.includes("hydrated");
|
|
34434
|
+
const value = attr.value.replace("hydrated", "").trim();
|
|
34435
|
+
const currentClass = element.getAttribute("class");
|
|
34436
|
+
element.setAttribute(
|
|
34437
|
+
attr.name,
|
|
34438
|
+
\`\${currentClass ? \`\${currentClass} \` : ""}\${value}\`
|
|
34439
|
+
);
|
|
34440
|
+
if (isWebComponent) {
|
|
34441
|
+
// Stencil is using this class for lazy loading component
|
|
34442
|
+
parent.setAttribute("class", "hydrated");
|
|
34443
|
+
} else {
|
|
34444
|
+
parent.removeAttribute(attr.name);
|
|
34445
|
+
}
|
|
34446
|
+
}
|
|
34447
|
+
}
|
|
34448
|
+
}
|
|
34449
|
+
}
|
|
34450
|
+
|
|
34451
|
+
ngAfterViewInit() {
|
|
34452
|
+
if (typeof window !== "undefined") {
|
|
34453
|
+
const element: HTMLElement | null = this._ref()?.nativeElement;
|
|
34454
|
+
this.enableAttributePassing(element, "select-examples-show-empty-option");
|
|
34455
|
+
}
|
|
34456
|
+
}
|
|
34457
|
+
}
|
|
34341
34458
|
`, "option-groups.example.ts": `import {
|
|
34342
34459
|
Component,
|
|
34343
34460
|
viewChild,
|
|
@@ -35614,6 +35731,66 @@ import DBSelect from "../select.vue";
|
|
|
35614
35731
|
</div>
|
|
35615
35732
|
</template>
|
|
35616
35733
|
|
|
35734
|
+
<script setup lang="ts">
|
|
35735
|
+
import DBSelect from "../select.vue";
|
|
35736
|
+
</script>`, "examples-show-empty-option.example.vue": `<template>
|
|
35737
|
+
<div
|
|
35738
|
+
:style="{
|
|
35739
|
+
width: '300px',
|
|
35740
|
+
}"
|
|
35741
|
+
>
|
|
35742
|
+
<DBSelect
|
|
35743
|
+
label="Label"
|
|
35744
|
+
placeholder="(Default)"
|
|
35745
|
+
:options="[
|
|
35746
|
+
{
|
|
35747
|
+
value: 'Option 1',
|
|
35748
|
+
},
|
|
35749
|
+
{
|
|
35750
|
+
value: 'Option 2',
|
|
35751
|
+
},
|
|
35752
|
+
{
|
|
35753
|
+
value: 'Option 3',
|
|
35754
|
+
},
|
|
35755
|
+
{
|
|
35756
|
+
value: 'Option 4',
|
|
35757
|
+
},
|
|
35758
|
+
{
|
|
35759
|
+
value: 'Option 5',
|
|
35760
|
+
},
|
|
35761
|
+
]"
|
|
35762
|
+
></DBSelect>
|
|
35763
|
+
</div>
|
|
35764
|
+
<div
|
|
35765
|
+
:style="{
|
|
35766
|
+
width: '300px',
|
|
35767
|
+
}"
|
|
35768
|
+
>
|
|
35769
|
+
<DBSelect
|
|
35770
|
+
label="Label"
|
|
35771
|
+
placeholder="showEmptyOption=false"
|
|
35772
|
+
:options="[
|
|
35773
|
+
{
|
|
35774
|
+
value: 'Option 1',
|
|
35775
|
+
},
|
|
35776
|
+
{
|
|
35777
|
+
value: 'Option 2',
|
|
35778
|
+
},
|
|
35779
|
+
{
|
|
35780
|
+
value: 'Option 3',
|
|
35781
|
+
},
|
|
35782
|
+
{
|
|
35783
|
+
value: 'Option 4',
|
|
35784
|
+
},
|
|
35785
|
+
{
|
|
35786
|
+
value: 'Option 5',
|
|
35787
|
+
},
|
|
35788
|
+
]"
|
|
35789
|
+
:showEmptyOption="false"
|
|
35790
|
+
></DBSelect>
|
|
35791
|
+
</div>
|
|
35792
|
+
</template>
|
|
35793
|
+
|
|
35617
35794
|
<script setup lang="ts">
|
|
35618
35795
|
import DBSelect from "../select.vue";
|
|
35619
35796
|
</script>`, "option-groups.example.vue": `<template>
|
|
@@ -36123,7 +36300,7 @@ import DBSelect from "../select.vue";
|
|
|
36123
36300
|
|
|
36124
36301
|
<script setup lang="ts">
|
|
36125
36302
|
import DBSelect from "../select.vue";
|
|
36126
|
-
</script>` }, "web-components": { "content.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-content",\n})\nexport class SelectContent {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-content");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Text"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n icon="x_placeholder"\n placeholder="Text - Leading Icon"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-density",\n})\nexport class SelectDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="functional"\n label="Label"\n placeholder="Functional"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-disabled",\n})\nexport class SelectDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-floating-label.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-examples-floating-label",\n})\nexport class SelectExamplesFloatingLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-examples-floating-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n value="Disabled"\n placeholder="Disabled"\n options={[\n {\n value: "Disabled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n disabled={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Invalid"\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "option-groups.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-option-groups",\n})\nexport class SelectOptionGroups {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-option-groups");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Using optgroups"\n options={[\n {\n label: "Group 1",\n value: "",\n options: [\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n ],\n },\n {\n label: "Group 2",\n value: "",\n options: [\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n ],\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Mixed options and groups"\n options={[\n {\n value: "Single Option",\n },\n {\n label: "Grouped Options",\n value: "",\n options: [\n {\n value: "Group Option 1",\n },\n {\n value: "Group Option 2",\n },\n ],\n },\n {\n value: "Another Single Option",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-required",\n})\nexport class SelectRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-required");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-label",\n})\nexport class SelectShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-message",\n})\nexport class SelectShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n message="Message"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n message="Message"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-required-asterisk",\n})\nexport class SelectShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n showRequiredAsterisk={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n showRequiredAsterisk={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "state.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-state",\n})\nexport class SelectState {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-state");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n value="Filled"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-validation",\n})\nexport class SelectValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-validation");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n options={[\n {\n value: "Valid",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-variant",\n})\nexport class SelectVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Above"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n value="Floating"\n placeholder="Floating"\n options={[\n {\n value: "Floating",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBSelect</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-select">\n <label for="test1">Label</label>\n <select id="test1" aria-describedby="db-infotext-01">\n <option class="placeholder" value=""></option>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </select>\n <span class="db-infotext" id="db-infotext-01">No Icon</span>\n </div>\n <div class="db-select">\n <label for="test2">Label</label>\n <select id="test2" aria-describedby="db-infotext-02">\n <option class="placeholder" value=""></option>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </select>\n <span\n class="db-infotext"\n data-semantic="informational"\n id="db-infotext-02"\n >\n informational\n </span>\n </div>\n <div class="db-select">\n <label for="test3">With optgroups</label>\n <select id="test3" aria-describedby="db-infotext-03">\n <optgroup label="Group 1">\n <option value="group1-option1">Group 1 Option 1</option>\n <option value="group1-option2">Group 1 Option 2</option>\n </optgroup>\n <optgroup label="Group 2">\n <option value="group2-option1">Group 2 Option 1</option>\n <option value="group2-option2">Group 2 Option 2</option>\n </optgroup>\n </select>\n <span class="db-infotext" id="db-infotext-03">With optgroups</span>\n </div>\n </body>\n</html>\n' } } }, stack: { props: `import { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
|
|
36303
|
+
</script>` }, "web-components": { "content.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-content",\n})\nexport class SelectContent {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-content");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Text"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n icon="x_placeholder"\n placeholder="Text - Leading Icon"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "density.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-density",\n})\nexport class SelectDensity {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-density");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="functional"\n label="Label"\n placeholder="Functional"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="regular"\n label="Label"\n placeholder="(Default) Regular"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n data-density="expressive"\n label="Label"\n placeholder="Expressive"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "disabled.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-disabled",\n})\nexport class SelectDisabled {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-disabled");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n disabled={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-floating-label.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-examples-floating-label",\n})\nexport class SelectExamplesFloatingLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-examples-floating-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n value="Filled"\n variant="floating"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n value="Disabled"\n placeholder="Disabled"\n options={[\n {\n value: "Disabled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n disabled={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Invalid"\n variant="floating"\n validation="invalid"\n invalidMessage="Invalid Message"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "examples-show-empty-option.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-examples-show-empty-option",\n})\nexport class SelectExamplesShowEmptyOption {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-examples-show-empty-option");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default)"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="showEmptyOption=false"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showEmptyOption={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "option-groups.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-option-groups",\n})\nexport class SelectOptionGroups {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-option-groups");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Using optgroups"\n options={[\n {\n label: "Group 1",\n value: "",\n options: [\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n ],\n },\n {\n label: "Group 2",\n value: "",\n options: [\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n ],\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="Mixed options and groups"\n options={[\n {\n value: "Single Option",\n },\n {\n label: "Grouped Options",\n value: "",\n options: [\n {\n value: "Group Option 1",\n },\n {\n value: "Group Option 2",\n },\n ],\n },\n {\n value: "Another Single Option",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "required.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-required",\n})\nexport class SelectRequired {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-required");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-label.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-label",\n})\nexport class SelectShowLabel {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-label");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showLabel={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-message.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-message",\n})\nexport class SelectShowMessage {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-message");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n message="Message"\n placeholder="(Default) False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={false}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n message="Message"\n placeholder="True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n showMessage={true}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "show-required-asterisk.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-show-required-asterisk",\n})\nexport class SelectShowRequiredAsterisk {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-show-required-asterisk");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) True"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n showRequiredAsterisk={true}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="False"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n required={true}\n showRequiredAsterisk={false}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "state.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-state",\n})\nexport class SelectState {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-state");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Empty"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n value="Filled"\n placeholder="Filled"\n options={[\n {\n value: "Filled",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "validation.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-validation",\n})\nexport class SelectValidation {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-validation");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="no-validation"\n placeholder="(Default) No validation"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="invalid"\n invalidMessage="Invalid Message"\n placeholder="Invalid"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n validation="valid"\n validMessage="Valid message"\n placeholder="Valid"\n options={[\n {\n value: "Valid",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n', "variant.example.tsx": 'import { DBSelect } from "../select";\n\nimport { Component, h, Fragment } from "@stencil/core";\n\n@Component({\n tag: "select-variant",\n})\nexport class SelectVariant {\n private _ref!: HTMLElement;\n\n /**\n * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.\n * @param element the ref for the component\n * @param customElementSelector the custom element like `my-component`\n */\n private enableAttributePassing(\n element: HTMLElement | null,\n customElementSelector: string\n ) {\n const parent = element?.closest(customElementSelector);\n if (element && parent) {\n const attributes = parent.attributes;\n for (let i = 0; i < attributes.length; i++) {\n const attr = attributes.item(i);\n if (\n attr && attr.name !== \'data-density\' &&\n (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))\n ) {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name !== \'data-density\' && attr.name !== "class" && attr.name === "style") {\n element.setAttribute(attr.name, attr.value);\n parent.removeAttribute(attr.name);\n }\n else if (attr && attr.name === "class") {\n const isWebComponent = attr.value.includes("hydrated");\n const value = attr.value.replace("hydrated", "").trim();\n const currentClass = element.getAttribute("class");\n element.setAttribute(\n attr.name,\n `${currentClass ? `${currentClass} ` : ""}${value}`\n );\n if (isWebComponent) {\n // Stencil is using this class for lazy loading component\n parent.setAttribute("class", "hydrated");\n } else {\n parent.removeAttribute(attr.name);\n }\n }\n }\n }\n }\n\n componentDidLoad() {\n this.enableAttributePassing(this._ref, "select-variant");\n }\n\n render() {\n return (\n <Fragment>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n placeholder="(Default) Above"\n options={[\n {\n value: "Option 1",\n },\n {\n value: "Option 2",\n },\n {\n value: "Option 3",\n },\n {\n value: "Option 4",\n },\n {\n value: "Option 5",\n },\n ]}\n ></db-select>\n </div>\n <div\n style={{\n width: "300px",\n }}\n >\n <db-select\n label="Label"\n variant="floating"\n value="Floating"\n placeholder="Floating"\n options={[\n {\n value: "Floating",\n selected: true,\n },\n {\n value: "Option 2",\n },\n ]}\n ></db-select>\n </div>\n </Fragment>\n );\n }\n}\n' }, html: { "index.html": '<!doctype html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <title>DBSelect</title>\n <link rel="stylesheet" href="/styles/relative.css" />\n </head>\n <body style="padding: var(--db-spacing-fixed-md)">\n <div class="db-select">\n <label for="test1">Label</label>\n <select id="test1" aria-describedby="db-infotext-01">\n <option class="placeholder" value=""></option>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </select>\n <span class="db-infotext" id="db-infotext-01">No Icon</span>\n </div>\n <div class="db-select">\n <label for="test2">Label</label>\n <select id="test2" aria-describedby="db-infotext-02">\n <option class="placeholder" value=""></option>\n <option value="test1">Test1</option>\n <option value="test2">Test2</option>\n <option value="test3">Test3</option>\n <option value="test4">Test4</option>\n <option value="test5">Test5</option>\n </select>\n <span\n class="db-infotext"\n data-semantic="informational"\n id="db-infotext-02"\n >\n informational\n </span>\n </div>\n <div class="db-select">\n <label for="test3">With optgroups</label>\n <select id="test3" aria-describedby="db-infotext-03">\n <optgroup label="Group 1">\n <option value="group1-option1">Group 1 Option 1</option>\n <option value="group1-option2">Group 1 Option 2</option>\n </optgroup>\n <optgroup label="Group 2">\n <option value="group2-option1">Group 2 Option 1</option>\n <option value="group2-option2">Group 2 Option 2</option>\n </optgroup>\n </select>\n <span class="db-infotext" id="db-infotext-03">With optgroups</span>\n </div>\n </body>\n</html>\n' } } }, stack: { props: `import { GapSpacingProps, GlobalProps, GlobalState } from '../../shared/model';
|
|
36127
36304
|
|
|
36128
36305
|
export const StackVariantList = ['simple', 'divider'] as const;
|
|
36129
36306
|
export type StackVariantType = (typeof StackVariantList)[number];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@db-ux/mcp-server",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.7.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "MCP server for DB UX Design System – gives LLMs access to UI components and code examples",
|
|
6
6
|
"repository": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"npm-run-all2": "8.0.4",
|
|
48
48
|
"tsx": "4.21.0",
|
|
49
49
|
"typescript": "5.9.3",
|
|
50
|
-
"vitest": "4.1.
|
|
50
|
+
"vitest": "4.1.5"
|
|
51
51
|
},
|
|
52
52
|
"publishConfig": {
|
|
53
53
|
"registry": "https://registry.npmjs.org/",
|