diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index ac63d263b95..81200364d6a 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -9,193 +9,93 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, import { RequestedItem } from "./components/accordion/interfaces"; import { IconName } from "./components/icon/interfaces"; import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -import { ActionMessages } from "./components/action/assets/action/t9n"; import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; import { Columns } from "./components/action-group/interfaces"; -import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; import { AlertDuration, Sync } from "./components/alert/interfaces"; import { NumberingSystem } from "./utils/locale"; -import { AlertMessages } from "./components/alert/assets/alert/t9n"; import { HeadingLevel } from "./components/functional/Heading"; -import { BlockMessages } from "./components/block/assets/block/t9n"; import { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -import { ButtonMessages } from "./components/button/assets/button/t9n"; -import { CardMessages } from "./components/card/assets/card/t9n"; import { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -import { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; import { MutableValidityState } from "./utils/form"; -import { ChipMessages } from "./components/chip/assets/chip/t9n"; import { ColorValue, InternalColor } from "./components/color-picker/interfaces"; import { Format } from "./components/color-picker/utils"; -import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; import { DateLocaleData } from "./components/date-picker/utils"; import { HoverRange } from "./utils/date"; -import { DialogMessages } from "./components/dialog/assets/dialog/t9n"; import { OverlayPositioning as OverlayPositioning1 } from "./components"; import { DialogPlacement } from "./components/dialog/interfaces"; import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; import { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -import { FilterMessages } from "./components/filter/assets/filter/t9n"; import { FlowItemLikeElement } from "./components/flow/interfaces"; -import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; import { ColorStop, DataSeries } from "./components/graph/interfaces"; -import { HandleMessages } from "./components/handle/assets/handle/t9n"; import { HandleChange, HandleNudge } from "./components/handle/interfaces"; -import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; import { InputPlacement } from "./components/input/interfaces"; -import { InputMessages } from "./components/input/assets/input/t9n"; -import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -import { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; import { ListDragDetail } from "./components/list/interfaces"; import { ItemData } from "./components/list-item/interfaces"; -import { ListMessages } from "./components/list/assets/list/t9n"; import { SelectionAppearance } from "./components/list/resources"; -import { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -import { MenuMessages } from "./components/menu/assets/menu/t9n"; -import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; import { MenuItemCustomEvent } from "./components/menu-item/interfaces"; import { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -import { ModalMessages } from "./components/modal/assets/modal/t9n"; -import { NoticeMessages } from "./components/notice/assets/notice/t9n"; -import { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -import { PanelMessages } from "./components/panel/assets/panel/t9n"; import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; import { ICON_TYPES } from "./components/pick-list/resources"; -import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -import { PopoverMessages } from "./components/popover/assets/popover/t9n"; -import { RatingMessages } from "./components/rating/assets/rating/t9n"; -import { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; import { DisplayMode } from "./components/sheet/interfaces"; import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; import { DragDetail } from "./utils/sortableComponent"; import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -import { TableMessages } from "./components/table/assets/table/t9n"; -import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; import { TileSelectType } from "./components/tile-select/interfaces"; import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -import { TipMessages } from "./components/tip/assets/tip/t9n"; -import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; import { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -import { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; import { ListItemAndHandle } from "./components/value-list-item/interfaces"; export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces"; export { RequestedItem } from "./components/accordion/interfaces"; export { IconName } from "./components/icon/interfaces"; export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces"; -export { ActionMessages } from "./components/action/assets/action/t9n"; export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui"; -export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n"; export { Columns } from "./components/action-group/interfaces"; -export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n"; -export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n"; export { AlertDuration, Sync } from "./components/alert/interfaces"; export { NumberingSystem } from "./utils/locale"; -export { AlertMessages } from "./components/alert/assets/alert/t9n"; export { HeadingLevel } from "./components/functional/Heading"; -export { BlockMessages } from "./components/block/assets/block/t9n"; export { BlockSectionToggleDisplay } from "./components/block-section/interfaces"; -export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n"; export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces"; -export { ButtonMessages } from "./components/button/assets/button/t9n"; -export { CardMessages } from "./components/card/assets/card/t9n"; export { ArrowType, AutoplayType } from "./components/carousel/interfaces"; -export { CarouselMessages } from "./components/carousel/assets/carousel/t9n"; export { MutableValidityState } from "./utils/form"; -export { ChipMessages } from "./components/chip/assets/chip/t9n"; export { ColorValue, InternalColor } from "./components/color-picker/interfaces"; export { Format } from "./components/color-picker/utils"; -export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n"; export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces"; -export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n"; -export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n"; export { DateLocaleData } from "./components/date-picker/utils"; export { HoverRange } from "./utils/date"; -export { DialogMessages } from "./components/dialog/assets/dialog/t9n"; export { OverlayPositioning as OverlayPositioning1 } from "./components"; export { DialogPlacement } from "./components/dialog/interfaces"; export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces"; export { ItemKeyboardEvent } from "./components/dropdown/interfaces"; -export { FilterMessages } from "./components/filter/assets/filter/t9n"; export { FlowItemLikeElement } from "./components/flow/interfaces"; -export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n"; export { ColorStop, DataSeries } from "./components/graph/interfaces"; -export { HandleMessages } from "./components/handle/assets/handle/t9n"; export { HandleChange, HandleNudge } from "./components/handle/interfaces"; -export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n"; export { InputPlacement } from "./components/input/interfaces"; -export { InputMessages } from "./components/input/assets/input/t9n"; -export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n"; -export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n"; -export { InputTextMessages } from "./components/input-text/assets/input-text/t9n"; -export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n"; -export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n"; -export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n"; export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces"; export { ListDragDetail } from "./components/list/interfaces"; export { ItemData } from "./components/list-item/interfaces"; -export { ListMessages } from "./components/list/assets/list/t9n"; export { SelectionAppearance } from "./components/list/resources"; -export { ListItemMessages } from "./components/list-item/assets/list-item/t9n"; -export { MenuMessages } from "./components/menu/assets/menu/t9n"; -export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n"; export { MenuItemCustomEvent } from "./components/menu-item/interfaces"; export { MeterFillType, MeterLabelType } from "./components/meter/interfaces"; -export { ModalMessages } from "./components/modal/assets/modal/t9n"; -export { NoticeMessages } from "./components/notice/assets/notice/t9n"; -export { PaginationMessages } from "./components/pagination/assets/pagination/t9n"; -export { PanelMessages } from "./components/panel/assets/panel/t9n"; export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic"; export { ICON_TYPES } from "./components/pick-list/resources"; -export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n"; -export { PopoverMessages } from "./components/popover/assets/popover/t9n"; -export { RatingMessages } from "./components/rating/assets/rating/t9n"; -export { ScrimMessages } from "./components/scrim/assets/scrim/t9n"; export { DisplayMode } from "./components/sheet/interfaces"; export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces"; -export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n"; export { DragDetail } from "./utils/sortableComponent"; export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces"; -export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; -export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; -export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; -export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; -export { TableMessages } from "./components/table/assets/table/t9n"; -export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n"; -export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n"; -export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n"; export { TileSelectType } from "./components/tile-select/interfaces"; export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces"; -export { TipMessages } from "./components/tip/assets/tip/t9n"; -export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n"; export { TreeItemSelectDetail } from "./components/tree-item/interfaces"; -export { ValueListMessages } from "./components/value-list/assets/value-list/t9n"; export { ListItemAndHandle } from "./components/value-list-item/interfaces"; export namespace Components { interface CalciteAccordion { diff --git a/packages/calcite-components/src/components/combobox-item/readme.md b/packages/calcite-components/src/components/combobox-item/readme.md index e8eb239f076..b8cb27beec2 100644 --- a/packages/calcite-components/src/components/combobox-item/readme.md +++ b/packages/calcite-components/src/components/combobox-item/readme.md @@ -16,6 +16,7 @@ For comprehensive guidance on using and implementing `calcite-combobox-item`, re | `guid` | `guid` | The `id` attribute of the component. When omitted, a globally unique identifier is used. | `string` | `guid()` | | `icon` | `icon` | Specifies an icon to display. | `CamelCaseIcons \| "date-time" \| "i12-x" \| "i14-x" \| "i18-x" \| "i1-x" \| "i2-d-explore" \| "i2-x" \| "i360-view" \| "i3-d-glasses" \| "i4-x" \| "i8-x" \| "a-z" \| "a-z-down" \| "a-z-up" \| "a3-landscape" \| "a3-portrait" \| "a4-landscape" \| "a4-portrait" \| "absolute-direction" \| "absolute-elevation" \| "access-string-results" \| "activity-monitor" \| "actual-size" \| "add-and-update-features" \| "add-constant" \| "add-features" \| "add-in" \| "add-in-edit" \| "add-in-new" \| "add-layer" \| "add-layer-service" \| "add-raster-variable" \| "add-rasters" \| "add-reaction" \| "add-text" \| "add-to-model" \| "address-book" \| "alert-off-circle-f" \| "all-servers" \| "analysis-overlay" \| "annotate-tool" \| "ansi-a-landscape" \| "ansi-a-portrait" \| "ansi-b-landscape" \| "ansi-b-portrait" \| "antenna-height" \| "app-gear" \| "app-launcher" \| "app-run" \| "app-update" \| "apply-changes" \| "apply-selection-to-existing-view" \| "arcgis-data-store" \| "arcgis-online" \| "arrow-bold-down" \| "arrow-bold-left" \| "arrow-bold-right" \| "arrow-bold-up" \| "arrow-circle-down" \| "arrow-circle-down-f" \| "arrow-double-diagonal1" \| "arrow-double-diagonal2" \| "arrow-double-horizontal" \| "arrow-double-vertical" \| "arrow-down" \| "arrow-down-left" \| "arrow-down-right" \| "arrow-left" \| "arrow-right" \| "arrow-right-left" \| "arrow-up" \| "arrow-up-down" \| "arrow-up-left" \| "arrow-up-right" \| "asterisk-large" \| "asterisk-small" \| "attachment-plus" \| "auto-layout" \| "battery-charging" \| "bear-left" \| "bear-right" \| "beginning-f" \| "bell-f" \| "bell-off" \| "bookmark-f" \| "border-radius-fully-rounded" \| "border-radius-rounded" \| "border-radius-sharp" \| "box-chart" \| "box-chart-series" \| "brackets-curly" \| "break-recurrence" \| "bring-forward" \| "bring-to-front" \| "browser-map" \| "brush-mark" \| "brush-mark-plus" \| "brush-tip" \| "bullet-point" \| "bullet-point-large" \| "camera-flash-off" \| "camera-flash-on" \| "camera-plus" \| "camera-switch-front-back" \| "camera-unlock" \| "caret-double-horizontal" \| "caret-double-vertical" \| "caret-down" \| "caret-left" \| "caret-right" \| "caret-square-down" \| "caret-square-left" \| "caret-square-right" \| "caret-square-up" \| "caret-up" \| "catalog-dataset" \| "center-align" \| "center-horizontal" \| "center-vertical" \| "change-detection" \| "change-font-size" \| "chart-gear" \| "chart-magnifying-glass" \| "check-circle" \| "check-circle-f" \| "check-extent" \| "check-layer" \| "check-shield" \| "check-square" \| "check-square-f" \| "chevron-down" \| "chevron-down-left" \| "chevron-down-right" \| "chevron-end" \| "chevron-left" \| "chevron-right" \| "chevron-start" \| "chevron-up" \| "chevron-up-left" \| "chevron-up-right" \| "chevrons-down" \| "chevrons-left" \| "chevrons-right" \| "chevrons-up" \| "chord-diagram" \| "circle-f" \| "circle-area" \| "circle-disallowed" \| "circle-inset-large" \| "circle-inset-medium" \| "circle-inset-small" \| "circle-pause" \| "circle-pause-f" \| "circle-stop" \| "circle-stop-f" \| "classify-objects" \| "classify-pixels" \| "clear-selection" \| "clipboard-brackets" \| "clock-down" \| "clock-forward" \| "clock-up" \| "cloud-data" \| "cloud-server" \| "code-branch" \| "code-branch-edit" \| "collaboration-distributed" \| "collaboration-user" \| "color-coded-map" \| "color-correction" \| "column-settings" \| "community-link-chart-layout" \| "compass-needle" \| "compass-north-circle" \| "conditional-rules" \| "conditional-rules-path" \| "conference-room" \| "configure-editing" \| "configure-grid-unit" \| "configure-popup" \| "content-full" \| "content-inline" \| "content-large" \| "content-medium" \| "content-minimal" \| "content-none" \| "content-side-by-side" \| "content-small" \| "contingent-values" \| "coordinate-system" \| "copy-to-clipboard" \| "credit-card" \| "cursor-click" \| "cursor-lock" \| "cursor-marquee" \| "cursor-minus" \| "cursor-plus" \| "cursor-selection" \| "custom-print" \| "cut-and-fill-volume-calculation" \| "data-card" \| "data-check" \| "data-clock-chart" \| "data-cloud" \| "data-folder" \| "data-magnifying-glass" \| "data-raster" \| "debug-script" \| "decrease-link-chart-symbol-size" \| "deep-learning" \| "deep-learning-project" \| "derived-value" \| "developer-credentials" \| "diamond-inset-large" \| "diamond-inset-medium" \| "diamond-inset-small" \| "dimensions-unit" \| "dimensions-wall" \| "display-selection-lock" \| "display-selection-unlock" \| "dissolve-features" \| "distance-type" \| "distribute-height-evenly" \| "distribute-width-evenly" \| "dock-bottom" \| "dock-left" \| "dock-right" \| "double-float" \| "download-to" \| "drive-time" \| "drive-time-largest" \| "drive-time-smallest" \| "drive-time-threshold" \| "drive-time-x-bar" \| "driving-distance" \| "driving-time" \| "drone-fixed-wing" \| "drone-flying-wing" \| "drone-quadcopter" \| "drone-quadcopter-top" \| "edit-attributes" \| "edit-geometry" \| "elevator-down" \| "elevator-up" \| "ellipsis-circle" \| "email-address" \| "embedded-card" \| "embedded-content" \| "embedded-live-content" \| "employee-id" \| "enable-disable-feature-selection" \| "end-f" \| "escalator-down" \| "escalator-up" \| "exclamation-mark-circle" \| "exclamation-mark-circle-f" \| "exclamation-mark-triangle" \| "exclamation-mark-triangle-f" \| "exclamation-point" \| "exclamation-point-f" \| "exit-highway-left" \| "exit-highway-right" \| "expression-defined-color" \| "extend-trim" \| "extent-filter" \| "face-id" \| "feature-details" \| "feature-layer" \| "file-archive" \| "file-cad" \| "file-code" \| "file-csv" \| "file-data" \| "file-ecd" \| "file-excel" \| "file-gpx" \| "file-image" \| "file-kml" \| "file-magnifying-glass" \| "file-pdf" \| "file-pdf-plus" \| "file-pitemx" \| "file-ppt" \| "file-report" \| "file-report-generic" \| "file-shape" \| "file-sound" \| "file-sqlite" \| "file-text" \| "file-user" \| "file-video" \| "file-word" \| "file-xml" \| "file-zip" \| "files-csv-collection" \| "filter-expand" \| "find-path" \| "flip-vertical" \| "floor-plan" \| "folder-f" \| "folder-archive" \| "folder-magnifying-glass" \| "folder-move" \| "folder-new" \| "folder-open" \| "folder-open-f" \| "folder-plus" \| "folder-star" \| "folder-video" \| "follow-pause" \| "follow-play" \| "force-directed-link-chart-layout" \| "fork-left" \| "fork-middle" \| "fork-right" \| "form-dropdown" \| "form-elements" \| "form-field" \| "form-field-multiline" \| "form-field-off" \| "forward-f" \| "four-by-one-grid" \| "four-by-three-grid" \| "four-by-two-grid" \| "frame-export" \| "freehand-area" \| "full-screen" \| "full-screen-exit" \| "function-editor" \| "gauge-summary" \| "geoanalytics-server" \| "geoevent-server" \| "geographic-link-chart-layout" \| "geonet-question" \| "gis-server" \| "gps-off" \| "gps-on" \| "gps-on-f" \| "graph-axis" \| "graph-bar100-stacked" \| "graph-bar" \| "graph-bar-side-by-side" \| "graph-bar-stacked" \| "graph-box-mean-lines" \| "graph-box-side-by-side" \| "graph-guides" \| "graph-histogram" \| "graph-line-series" \| "graph-moving-average" \| "graph-pie-slice" \| "graph-scatter-plot" \| "graph-time-series" \| "grid-diamond" \| "grid-hexagon" \| "grid-triangle" \| "grid-unit" \| "ground-control-point" \| "group-form" \| "group-form-plus" \| "group-items" \| "group-layers" \| "group-layout-elements" \| "group-x" \| "h3-hexagon" \| "handle-vertical" \| "heading-layout" \| "heading-rtl" \| "heart-f" \| "heat-chart" \| "heavy-rain" \| "heavy-snow" \| "hexagon2-inset-large" \| "hexagon2-inset-medium" \| "hexagon2-inset-small" \| "hexagon-inset-large" \| "hexagon-inset-medium" \| "hexagon-inset-small" \| "hide-derived-value" \| "hide-empty" \| "hide-layers" \| "hide-parameters" \| "hierarchical-link-chart-layout" \| "highlighter-tip" \| "highway-change" \| "highway-change-right" \| "hillshade-effect" \| "horizontal-distribute" \| "hourglass-active" \| "hourglass-expired" \| "image-chips" \| "image-collection-explorer" \| "image-display-order" \| "image-layer" \| "image-magnifying-glass" \| "image-mensuration" \| "image-pin" \| "image-plus" \| "image-segmentation" \| "image-server" \| "image-space" \| "image-unit" \| "increase-link-chart-symbol-size" \| "information-f" \| "information-letter" \| "initiative-template" \| "joined-view-layer" \| "knowledge-graph" \| "knowledge-graph-dashboard" \| "knowledge-graph-data-model" \| "knowledge-graph-data-store" \| "knowledge-graph-export" \| "knowledge-graph-import" \| "knowledge-graph-new" \| "knowledge-graph-relationship" \| "knowledge-layer" \| "knowledge-server" \| "knowledge-studio" \| "label-off" \| "language-translate" \| "lasso-select" \| "layer-basemap" \| "layer-broken" \| "layer-filter" \| "layer-graphics" \| "layer-hide" \| "layer-kml" \| "layer-line" \| "layer-line-service" \| "layer-map" \| "layer-map-service" \| "layer-points" \| "layer-polygon" \| "layer-polygon-service" \| "layer-service" \| "layer-settings" \| "layer-zoom-to" \| "layers-editable" \| "layers-f" \| "layers-reference" \| "layout-compact" \| "layout-horizontal" \| "layout-spacious" \| "layout-vertical" \| "left-align" \| "left-edge" \| "left-left" \| "left-right" \| "legend-left" \| "legend-plus" \| "legend-right" \| "light-rain" \| "light-snow" \| "line-check" \| "line-dashed" \| "line-dotted" \| "line-of-sight" \| "line-solid" \| "line-straight" \| "link-chart" \| "link-chart-expand" \| "link-chart-from-template" \| "list-bullet" \| "list-button" \| "list-check" \| "list-check-all" \| "list-merge" \| "list-number" \| "list-number-rtl" \| "list-radio" \| "list-rectangle" \| "list-show-all" \| "livestream-video-layer" \| "location-sharing" \| "location-sharing-f" \| "location-sharing-off" \| "lock-f" \| "ltr-elements-align" \| "ltr-paragraph-align" \| "magnifying-glass" \| "magnifying-glass-minus" \| "magnifying-glass-plus" \| "map-contents" \| "map-from-template" \| "map-level-settings" \| "map-pin" \| "map-space" \| "mask-inside" \| "mask-outside" \| "maximum-graph" \| "maximum-territory-distance" \| "measure-area" \| "measure-building-height-shadow" \| "measure-building-height-top-base" \| "measure-building-height-top-shadow" \| "measure-line" \| "media-layer" \| "mega-phone" \| "members-brackets" \| "merge-details" \| "merge-on-highway" \| "merge-on-highway-right" \| "merge-units" \| "microphone-plus" \| "min-distance-between-centers" \| "minimum-graph" \| "minus-circle" \| "minus-circle-f" \| "minus-square" \| "minus-square-f" \| "miscellaneous-collection" \| "mission-server" \| "mobile-off" \| "mobile-vibrate" \| "model-edit" \| "modify-associations" \| "move-from-basemap" \| "move-to-basemap" \| "move-up" \| "move-up-all" \| "multidimensional-raster" \| "multiple-variables" \| "music-note" \| "new-link-chart" \| "new-model" \| "new-raster-function-template" \| "new-training" \| "no-attachment" \| "no-image" \| "no-map" \| "nodes-link" \| "nodes-merge" \| "nodes-unlink" \| "nodes-unmerge" \| "notebook-server" \| "notebook-snapshot" \| "notepad-add" \| "notepad-edit" \| "number-circle1" \| "number-circle1-f" \| "number-circle2" \| "number-circle2-f" \| "number-circle3" \| "number-circle3-f" \| "number-circle4" \| "number-circle4-f" \| "number-circle5" \| "number-circle5-f" \| "number-circle6" \| "number-circle6-f" \| "number-circle7" \| "number-circle7-f" \| "number-circle8" \| "number-circle8-f" \| "number-circle9" \| "number-circle9-f" \| "number-of-territories" \| "object-detection" \| "objectstore-data-store" \| "on-the-ground-elevation" \| "open-book" \| "oriented-imagery-layer" \| "oriented-imagery-widget" \| "overlap-features" \| "overwrite-features" \| "overwrite-project" \| "paint-bucket" \| "palette-check" \| "pan-drag" \| "parcel-layer" \| "partly-cloudy" \| "paste-with-attribute" \| "paste-without-attribute" \| "pause-f" \| "pen-mark" \| "pen-mark-plus" \| "pen-tip" \| "pencil-mark" \| "pencil-mark-plus" \| "pencil-square" \| "pencil-tip" \| "personal-homepage" \| "pie-chart" \| "pin-plus" \| "pin-tear" \| "pin-tear-f" \| "play-f" \| "plus-circle" \| "plus-square" \| "point-line" \| "polygon-area" \| "polygon-line-check" \| "polygon-select" \| "polygon-vertices" \| "pop-up1" \| "pop-up-blank" \| "pop-up-blank-f" \| "premium-content-user-credit" \| "presentation-x" \| "print-preview" \| "processing-templates" \| "profile-variables" \| "project-mission" \| "project-template" \| "puzzle-piece" \| "qr-code" \| "qt-code" \| "question-f" \| "question-mark" \| "radial-tree-link-chart-layout" \| "rain-snow" \| "rain-thunder" \| "ramp-left" \| "ramp-right" \| "raster-analysis" \| "raster-function" \| "raster-function-template" \| "raster-function-template-play" \| "read-only-non-editable" \| "rectangle-area" \| "rectangle-plus" \| "recycle-bin" \| "refresh-f" \| "relational-data-store" \| "relative-direction" \| "relative-to-ground-elevation" \| "relative-to-scene-elevation" \| "remove-from-list" \| "remove-linkchart" \| "reorder-cards" \| "reorder-grid" \| "reorder-stack" \| "replace-image" \| "reshape-add-geometry" \| "reshape-subtract-geometry" \| "reshape-tool" \| "resize-area" \| "reverse-f" \| "ribbon-rosette" \| "right-align" \| "right-angle" \| "right-edge" \| "right-left" \| "right-right" \| "rings-largest" \| "rings-smallest" \| "rings-threshold" \| "rings-x-bar" \| "road-sign" \| "rotate-device" \| "round-about" \| "round-about-right" \| "rounded-rectangle" \| "route-from" \| "route-to" \| "rss-f" \| "rtl-elements-align" \| "rtl-paragraph-align" \| "running-outline" \| "rural-driving-distance" \| "rural-driving-time" \| "satellite0-f" \| "satellite1-f" \| "satellite2-f" \| "satellite3-f" \| "save-as" \| "scan-area" \| "scan-barcode" \| "scan-corridor" \| "scan-crosshatch" \| "scan-perimeter" \| "scan-vertical" \| "screenshot-mode" \| "select-by-attributes" \| "select-category" \| "select-column" \| "select-range" \| "select-visible" \| "selected-items-filter" \| "selection-filter" \| "selection-manager" \| "selection-set" \| "selection-x" \| "send-backwards" \| "send-to-back" \| "serial-port" \| "server-lock" \| "share-ios" \| "sharp-left" \| "sharp-right" \| "shield-coin" \| "shopping-cart" \| "show-all-parameters" \| "show-column" \| "show-derived-value" \| "show-multiple-layers-at-a-time" \| "show-one-layer-at-a-time" \| "show-required-parameters" \| "sign-in" \| "sign-out" \| "simple-link-chart-layout" \| "sky-plot" \| "sliders-horizontal" \| "smart-camera" \| "smart-form" \| "smart-tree-link-chart-layout" \| "snap-to-grid" \| "snap-to-pixel" \| "snap-to-point" \| "snow-thunder" \| "sort-ascending" \| "sort-ascending-arrow" \| "sort-descending" \| "sort-descending-arrow" \| "sound-low" \| "sound-off" \| "sound-unavailable" \| "spatiotemporal-data-store" \| "speech-bubble" \| "speech-bubble-check" \| "speech-bubble-exclamation" \| "speech-bubble-like" \| "speech-bubble-plus" \| "speech-bubble-social" \| "speech-bubbles" \| "split-features" \| "split-geometry" \| "split-units" \| "square-f" \| "square-area" \| "square-inset-large" \| "square-inset-medium" \| "square-inset-small" \| "stairs-down" \| "stairs-up" \| "star-f" \| "star-circle" \| "stop-square" \| "stop-square-f" \| "stored-as-new-query" \| "stored-query" \| "sub-fields" \| "subheading-rtl" \| "suitability-analysis-output" \| "summarize-center-and-dispersion1" \| "summarize-center-and-dispersion2" \| "summarize-center-and-dispersion3" \| "system-management" \| "tabbed-view" \| "take-pedestrian-ramp" \| "territory-buffer-distance" \| "test-data" \| "text-bold" \| "text-button" \| "text-dashed-underline" \| "text-large" \| "text-medium" \| "text-paragraph-large" \| "text-small" \| "text-solid-underline" \| "three-by-one-grid" \| "three-by-three-grid" \| "three-by-two-grid" \| "thumbs-down" \| "thumbs-up" \| "tile-cache-data-store" \| "tile-layer" \| "tiled-imagery-layer" \| "time-filter" \| "time-zone" \| "toggle-off" \| "toggle-on" \| "tour-pin-tear" \| "transverse-hexagon" \| "trapezoid-area" \| "trucking-distance" \| "trucking-time" \| "u-turn" \| "u-turn-right" \| "ungroup-items" \| "ungroup-layers" \| "ungroup-layout-elements" \| "update-features" \| "update-project" \| "upload-to" \| "urban-model" \| "usb-security-key" \| "user-calendar" \| "user-down" \| "user-key" \| "user-minus" \| "user-plus" \| "user-to-device" \| "user-up" \| "user-x" \| "utility-network" \| "utility-network-trace" \| "validate-utility-network-topology" \| "vertex-check" \| "vertex-edit" \| "vertex-gps" \| "vertex-move" \| "vertex-plus" \| "vertex-x" \| "vertical-distribute" \| "video-layer" \| "video-plus" \| "video-server" \| "video-single-server" \| "video-web" \| "view-associations" \| "view-hide" \| "view-mixed" \| "view-visible" \| "walk-through-door" \| "walking-distance" \| "walking-time" \| "widgets-group" \| "widgets-source" \| "widgets-tabs" \| "workflow-diagram" \| "workflow-manager-server" \| "x-axis-guide" \| "x-bar" \| "x-circle" \| "x-circle-f" \| "x-octagon" \| "x-octagon-f" \| "y-axis-guide" \| "zoom-in-fixed" \| "zoom-out-fixed" \| "zoom-to-object"` | `undefined` | | `iconFlipRtl` | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean` | `false` | +| `metadata` | -- | Provides additional metadata to the component used in filtering. | `{ [x: string]: unknown; }` | `undefined` | | `selected` | `selected` | When `true`, the component is selected. | `boolean` | `false` | | `shortHeading` | `short-heading` | The component's short heading. When provided, the short heading will be displayed in the component's selection. It is recommended to use 5 characters or fewer. | `string` | `undefined` | | `textLabel` *(required)* | `text-label` | The component's text. | `string` | `undefined` | diff --git a/packages/calcite-components/src/components/dialog/readme.md b/packages/calcite-components/src/components/dialog/readme.md index 38c5eeeee97..d5b60ae6a2f 100644 --- a/packages/calcite-components/src/components/dialog/readme.md +++ b/packages/calcite-components/src/components/dialog/readme.md @@ -8,3 +8,128 @@ For comprehensive guidance on using and implementing `calcite-dialog`, refer to } + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ------------ | +| `beforeClose` | -- | Passes a function to run before the component closes. | `() => Promise` | `undefined` | +| `closeDisabled` | `close-disabled` | When `true`, disables the component's close button. | `boolean` | `false` | +| `description` | `description` | A description for the component. | `string` | `undefined` | +| `heading` | `heading` | The component header text. | `string` | `undefined` | +| `headingLevel` | `heading-level` | Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `undefined` | +| `kind` | `kind` | Specifies the kind of the component, which will style the top border. | `"brand" \| "danger" \| "info" \| "success" \| "warning"` | `undefined` | +| `loading` | `loading` | When `true`, a busy indicator is displayed. | `boolean` | `false` | +| `menuOpen` | `menu-open` | When `true`, the action menu items in the `header-menu-actions` slot are open. | `boolean` | `false` | +| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component. | `DialogMessages` | `undefined` | +| `modal` | `modal` | When `true`, displays a scrim blocking interaction underneath the component. | `boolean` | `false` | +| `open` | `open` | When `true`, displays and positions the component. | `boolean` | `false` | +| `overlayPositioning` | `overlay-positioning` | Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. | `"absolute" \| "fixed"` | `"absolute"` | +| `placement` | `placement` | Specifies the placement of the dialog. | `"bottom" \| "bottom-end" \| "bottom-start" \| "center" \| "cover" \| "top" \| "top-end" \| "top-start"` | `"center"` | +| `scale` | `scale` | Specifies the size of the component. | `"l" \| "m" \| "s"` | `"m"` | +| `widthScale` | `width-scale` | Specifies the width of the component. | `"l" \| "m" \| "s"` | `"m"` | + +## Events + +| Event | Description | Type | +| -------------------------- | -------------------------------------------------------------------------------------------------------- | ------------------- | +| `calciteDialogBeforeClose` | Fires when the component is requested to be closed and before the closing transition begins. | `CustomEvent` | +| `calciteDialogBeforeOpen` | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. | `CustomEvent` | +| `calciteDialogClose` | Fires when the component is closed and animation is complete. | `CustomEvent` | +| `calciteDialogOpen` | Fires when the component is open and animation is complete. | `CustomEvent` | +| `calciteDialogScroll` | Fires when the content is scrolled. | `CustomEvent` | + +## Methods + +### `scrollContentTo(options?: ScrollToOptions) => Promise` + +Scrolls the component's content to a specified set of coordinates. + +#### Parameters + +| Name | Type | Description | +| --------- | ----------------- | -------------------------------------------- | +| `options` | `ScrollToOptions` | - allows specific coordinates to be defined. | + +#### Returns + +Type: `Promise` + +- promise that resolves once the content is scrolled to. + +### `setFocus() => Promise` + +Sets focus on the component's "close" button (the first focusable item). + +#### Returns + +Type: `Promise` + +- A promise that is resolved when the operation has completed. + +### `updateFocusTrapElements() => Promise` + +Updates the element(s) that are used within the focus-trap of the component. + +#### Returns + +Type: `Promise` + +## Slots + +| Slot | Description | +| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | +| | A slot for adding content. | +| `"action-bar"` | A slot for adding a `calcite-action-bar` to the component. | +| `"alerts"` | A slot for adding `calcite-alert`s to the component. | +| `"content"` | A slot for adding custom content. | +| `"content-bottom"` | A slot for adding content below the unnamed (default) slot and - if populated - the `footer` slot. | +| `"content-top"` | A slot for adding content above the unnamed (default) slot and - if populated - below the `action-bar` slot. | +| `"fab"` | A slot for adding a `calcite-fab` (floating action button) to perform an action. | +| `"footer"` | A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots. | +| `"footer-end"` | A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot. | +| `"footer-start"` | A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot. | +| `"header-actions-end"` | A slot for adding actions or content to the ending side of the component's header. | +| `"header-actions-start"` | A slot for adding actions or content to the starting side of the component's header. | +| `"header-content"` | A slot for adding custom content to the component's header. | +| `"header-menu-actions"` | A slot for adding an overflow menu with actions inside a `calcite-dropdown`. | + +## CSS Custom Properties + +| Name | Description | +| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--calcite-dialog-border-color` | Specifies the component's border color. | +| `--calcite-dialog-footer-space` | Specifies the padding of the component's footer. | +| `--calcite-dialog-scrim-background-color` | Specifies the background color of the component's scrim. | +| `--calcite-dialog-size-x` | Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement="cover"` is set. | +| `--calcite-dialog-size-y` | Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement="cover"` is set. | + +## Dependencies + +### Depends on + +- [calcite-scrim](../scrim) +- [calcite-panel](../panel) + +### Graph + +```mermaid +graph TD; + calcite-dialog --> calcite-scrim + calcite-dialog --> calcite-panel + calcite-scrim --> calcite-loader + calcite-panel --> calcite-action + calcite-panel --> calcite-action-menu + calcite-panel --> calcite-scrim + calcite-action --> calcite-loader + calcite-action --> calcite-icon + calcite-action-menu --> calcite-action + calcite-action-menu --> calcite-popover + calcite-popover --> calcite-action + calcite-popover --> calcite-icon + style calcite-dialog fill:#f9f,stroke:#333,stroke-width:4px +``` + +--- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/calcite-components/src/components/flow-item/readme.md b/packages/calcite-components/src/components/flow-item/readme.md index f96c2b824b2..dfa0004a958 100644 --- a/packages/calcite-components/src/components/flow-item/readme.md +++ b/packages/calcite-components/src/components/flow-item/readme.md @@ -63,22 +63,22 @@ promise. ## Slots -| Slot | Description | -| ------------------------ | ------------------------------------------------------------------------------------------------------------ | -| | A slot for adding custom content. | -| `"action-bar"` | A slot for adding a `calcite-action-bar` to the component. | -| `"alerts"` | A slot for adding `calcite-alert`s to the component. | -| `"content-bottom"` | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) | -| `"content-top"` | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). | -| `"fab"` | A slot for adding a `calcite-fab` (floating action button) to perform an action. | -| `"footer"` | A slot for adding custom content to the component's footer. | -| `"footer-actions"` | [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer. | -| `"footer-end"` | A slot for adding a trailing footer custom content. | -| `"footer-start"` | A slot for adding a leading footer custom content. | -| `"header-actions-end"` | A slot for adding `calcite-action`s or content to the end side of the component's header. | -| `"header-actions-start"` | A slot for adding `calcite-action`s or content to the start side of the component's header. | -| `"header-content"` | A slot for adding custom content to the component's header. | -| `"header-menu-actions"` | A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`. | +| Slot | Description | +| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | +| | A slot for adding custom content. | +| `"action-bar"` | A slot for adding a `calcite-action-bar` to the component. | +| `"alerts"` | A slot for adding `calcite-alert`s to the component. | +| `"content-bottom"` | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) | +| `"content-top"` | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). | +| `"fab"` | A slot for adding a `calcite-fab` (floating action button) to perform an action. | +| `"footer"` | A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots. | +| `"footer-actions"` | [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer. | +| `"footer-end"` | A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot. | +| `"footer-start"` | A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot. | +| `"header-actions-end"` | A slot for adding `calcite-action`s or content to the end side of the component's header. | +| `"header-actions-start"` | A slot for adding `calcite-action`s or content to the start side of the component's header. | +| `"header-content"` | A slot for adding custom content to the component's header. | +| `"header-menu-actions"` | A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`. | ## CSS Custom Properties diff --git a/packages/calcite-components/src/components/modal/readme.md b/packages/calcite-components/src/components/modal/readme.md index 120f293b2bd..22c6ca5366f 100644 --- a/packages/calcite-components/src/components/modal/readme.md +++ b/packages/calcite-components/src/components/modal/readme.md @@ -68,18 +68,6 @@ Updates the element(s) that are used within the focus-trap of the component. Type: `Promise` -## Slots - -| Slot | Description | -| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- | -| `"back"` | A slot for adding a back button. | -| `"content"` | A slot for adding the component's content. | -| `"content-bottom"` | A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down. | -| `"content-top"` | A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down. | -| `"header"` | A slot for adding header text. | -| `"primary"` | A slot for adding a primary button. | -| `"secondary"` | A slot for adding a secondary button. | - ## CSS Custom Properties | Name | Description | diff --git a/packages/calcite-components/src/components/panel/readme.md b/packages/calcite-components/src/components/panel/readme.md index 61f41974169..b9c89530709 100644 --- a/packages/calcite-components/src/components/panel/readme.md +++ b/packages/calcite-components/src/components/panel/readme.md @@ -67,10 +67,10 @@ Type: `Promise` | `"content-bottom"` | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) | | `"content-top"` | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). | | `"fab"` | A slot for adding a `calcite-fab` (floating action button) to perform an action. | -| `"footer"` | A slot for adding custom content to the component's footer. | +| `"footer"` | A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots. | | `"footer-actions"` | [Deprecated] Use the `footer-start` and `footer-end` slots instead. A slot for adding `calcite-button`s to the component's footer. | -| `"footer-end"` | A slot for adding a trailing footer custom content. | -| `"footer-start"` | A slot for adding a leading footer custom content. | +| `"footer-end"` | A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot. | +| `"footer-start"` | A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot. | | `"header-actions-end"` | A slot for adding actions or content to the end side of the header. | | `"header-actions-start"` | A slot for adding actions or content to the start side of the header. | | `"header-content"` | A slot for adding custom content to the header. | @@ -87,6 +87,7 @@ Type: `Promise` ### Used by +- [calcite-dialog](../dialog) - [calcite-flow-item](../flow-item) ### Depends on @@ -109,6 +110,7 @@ graph TD; calcite-popover --> calcite-action calcite-popover --> calcite-icon calcite-scrim --> calcite-loader + calcite-dialog --> calcite-panel calcite-flow-item --> calcite-panel style calcite-panel fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/calcite-components/src/components/scrim/readme.md b/packages/calcite-components/src/components/scrim/readme.md index 1a15bf54afd..d4c50a0fcb7 100644 --- a/packages/calcite-components/src/components/scrim/readme.md +++ b/packages/calcite-components/src/components/scrim/readme.md @@ -28,6 +28,7 @@ For comprehensive guidance on using and implementing `calcite-scrim`, refer to t ### Used by - [calcite-block](../block) +- [calcite-dialog](../dialog) - [calcite-list](../list) - [calcite-modal](../modal) - [calcite-panel](../panel) @@ -45,6 +46,7 @@ For comprehensive guidance on using and implementing `calcite-scrim`, refer to t graph TD; calcite-scrim --> calcite-loader calcite-block --> calcite-scrim + calcite-dialog --> calcite-scrim calcite-list --> calcite-scrim calcite-modal --> calcite-scrim calcite-panel --> calcite-scrim diff --git a/packages/calcite-components/src/components/shell/readme.md b/packages/calcite-components/src/components/shell/readme.md index b3ba1afe731..8502c8baa22 100644 --- a/packages/calcite-components/src/components/shell/readme.md +++ b/packages/calcite-components/src/components/shell/readme.md @@ -12,19 +12,20 @@ For comprehensive guidance on using and implementing `calcite-shell`, refer to t ## Slots -| Slot | Description | -| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -| | A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map. | -| `"alerts"` | A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the `calcite-shell`. | -| `"center-row"` | [Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`. | -| `"footer"` | A slot for adding footer content. This content will be positioned at the bottom of the component. | -| `"header"` | A slot for adding header content. This content will be positioned at the top of the component. | -| `"modals"` | A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`. | -| `"panel-bottom"` | A slot for adding the bottom `calcite-shell-panel`. | -| `"panel-end"` | A slot for adding the ending `calcite-shell-panel`. | -| `"panel-start"` | A slot for adding the starting `calcite-shell-panel`. | -| `"panel-top"` | A slot for adding the top `calcite-shell-panel`. | -| `"sheets"` | A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the `calcite-shell`. | +| Slot | Description | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| | A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map. | +| `"alerts"` | A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the `calcite-shell`. | +| `"center-row"` | [Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`. | +| `"dialogs"` | A slot for adding `calcite-dialog` components. When placed in this slot, the dialog position will be constrained to the extent of the `calcite-shell`. | +| `"footer"` | A slot for adding footer content. This content will be positioned at the bottom of the component. | +| `"header"` | A slot for adding header content. This content will be positioned at the top of the component. | +| `"modals"` | A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`. | +| `"panel-bottom"` | A slot for adding the bottom `calcite-shell-panel`. | +| `"panel-end"` | A slot for adding the ending `calcite-shell-panel`. | +| `"panel-start"` | A slot for adding the starting `calcite-shell-panel`. | +| `"panel-top"` | A slot for adding the top `calcite-shell-panel`. | +| `"sheets"` | A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the `calcite-shell`. | ## CSS Custom Properties