@workday/canvas-kit-react/dist/commonjs/expandable/lib/ExpandableIcon.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExpandableIcon = exports.expandableIconStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const icon_1 = require("@workday/canvas-kit-react/icon");
const layout_1 = require("@workday/canvas-kit-react/layout");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useExpandableIcon_1 = require("./hooks/useExpandableIcon");
const useExpandableModel_1 = require("./hooks/useExpandableModel");
exports.expandableIconStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: icon_1.systemIconStencil,
    base: { name: "12wom2", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
    modifiers: {
        isExpanded: {
            true: { name: "ju6td", styles: "" },
            false: { name: "47kz6o", styles: "" }
        },
        position: {
            start: { name: "oan0g", styles: "" },
            end: { name: "2gfyw7", styles: "" },
            only: { name: "3qdv5k", styles: "" }
        }
    },
    compound: [
        {
            modifiers: { position: 'end', isExpanded: false },
            styles: { name: "3935q4", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
        },
        {
            modifiers: { position: 'end', isExpanded: true },
            styles: { name: "11x0mk", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
        },
        {
            modifiers: { position: 'start', isExpanded: false },
            styles: { name: "29ktav", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
        },
        {
            modifiers: { position: 'start', isExpanded: true },
            styles: { name: "27gck7", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
        }
    ]
}, "expandable-icon-af0853");
exports.ExpandableIcon = (0, common_1.createSubcomponent)('span')({
    modelHook: useExpandableModel_1.useExpandableModel,
    elemPropsHook: useExpandableIcon_1.useExpandableIcon,
})(({ icon, visible, iconPosition = 'start', ...elementProps }, Element) => {
    return ((0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { as: Element, icon: icon || canvas_system_icons_web_1.chevronUpIcon, ...(0, layout_1.mergeStyles)(elementProps, (0, exports.expandableIconStencil)({ position: iconPosition, isExpanded: visible })) }));
});