{"mappings":"AACA,cAAc,sBAAiC;AAG/C,SAAS,mBAAmB;;;;;;;AAU5B,cAWM,aAAa,YAAY;;;;CAI7B,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;CAKA,AACA;CAEA;CAiBA,UAAU,UAAU,eAAe;;AAYrC,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/flex/component.ts"],"sourcesContent":["import { attr, godown, htmlSlot, StyleController, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\nconst protoName = \"flex\";\n\n/**\n * {@linkcode Flex} provides flex layout.\n *\n * @slot - Flex items.\n * @category layout\n */\n@godown(protoName)\n@styles(css`\n  :host,\n  :host([contents]) [part=\"root\"] {\n    display: flex;\n  }\n\n  [part=\"root\"] {\n    display: contents;\n  }\n`)\nclass Flex extends GlobalStyle {\n  /**\n   * CSS property `flex-flow` (`flex-direction flex-wrap`).\n   */\n  @property({ attribute: \"flex-flow\" })\n  flexFlow: string;\n\n  /**\n   * CSS property `gap`.\n   */\n  @property()\n  gap: string;\n\n  /**\n   * CSS property `justify-content`.\n   */\n  @property()\n  content: string;\n\n  /**\n   * CSS property `align-items`.\n   */\n  @property()\n  items: string;\n\n  /**\n   * If true, set flex-direction to \"column\".\n   */\n  @property({ type: Boolean })\n  vertical = false;\n\n  constructor() {\n    super();\n    new StyleController(\n      this,\n      () => ({\n        \":host\": {\n          gap: this.gap,\n          \"flex-flow\": this.flexFlow,\n          \"flex-direction\": this.vertical && \"column\",\n          \"align-items\": this.items,\n          \"justify-content\": this.content,\n        },\n      }),\n      () => [this.gap, this.flexFlow, this.vertical, this.items, this.content],\n    );\n  }\n\n  protected render(): TemplateResult<1> {\n    return html`\n      <div\n        part=\"root\"\n        ${attr(this.observedRecord)}\n      >\n        ${htmlSlot()}\n      </div>\n    `;\n  }\n}\n\nexport default Flex;\nexport { Flex };\n"],"version":3,"file":"component.d.ts"}