├── .editorconfig ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── workflows │ ├── build.yml │ ├── codeql.yml │ └── deploy-website.yml ├── .gitignore ├── .prettierrc.json ├── CODE_OF_CONDUCT.md ├── LICENSE ├── astro-docs ├── .editorconfig ├── .gitignore ├── .prettierrc.json ├── README.md ├── astro.config.mjs ├── bin │ └── convert-to-webp.ts ├── package-lock.json ├── package.json ├── public │ ├── ads.txt │ ├── assets │ │ ├── icons.json │ │ ├── img │ │ │ ├── accordion-dark.webp │ │ │ ├── accordion.webp │ │ │ ├── avatar.webp │ │ │ ├── avatar.xs.webp │ │ │ ├── calendar-dark.webp │ │ │ ├── calendar.webp │ │ │ ├── canvas.webp │ │ │ ├── chart-doughnut-dark.webp │ │ │ ├── chart-doughnut.webp │ │ │ ├── chart-pie-dark.webp │ │ │ ├── chart-pie.webp │ │ │ ├── code-editor-dark.webp │ │ │ ├── code-editor.webp │ │ │ ├── code-highlighter-dark.webp │ │ │ ├── code-highlighter.webp │ │ │ ├── condition-builder.webp │ │ │ ├── dropdown-dark.png │ │ │ ├── dropdown-dark.webp │ │ │ ├── dropdown.png │ │ │ ├── dropdown.webp │ │ │ ├── empty-state-dark.webp │ │ │ ├── empty-state.webp │ │ │ ├── favicon.svg │ │ │ ├── flow-designer.webp │ │ │ ├── footer-dark.webp │ │ │ ├── footer.webp │ │ │ ├── goat.svg │ │ │ ├── header-dark.webp │ │ │ ├── header.webp │ │ │ ├── html-editor-dark.webp │ │ │ ├── html-editor.webp │ │ │ ├── image-not-found.webp │ │ │ ├── list.webp │ │ │ ├── logo.svg │ │ │ ├── logo.webp │ │ │ ├── menu-dark.png │ │ │ ├── menu-dark.webp │ │ │ ├── menu.png │ │ │ ├── menu.webp │ │ │ ├── modal-dark.webp │ │ │ ├── modal.webp │ │ │ ├── modals │ │ │ │ ├── modal-basic.png │ │ │ │ ├── modal-large.png │ │ │ │ ├── modal-long.png │ │ │ │ ├── modal-small.png │ │ │ │ └── modal-vertically-centered.png │ │ │ ├── no-image.jpg │ │ │ ├── notification-manager-dark.webp │ │ │ ├── notification-manager.webp │ │ │ ├── popovers │ │ │ │ ├── popover-bottom.png │ │ │ │ ├── popover-left.png │ │ │ │ ├── popover-right.png │ │ │ │ └── popover-top.png │ │ │ ├── select-dark.webp │ │ │ ├── select.webp │ │ │ ├── slider-dark.webp │ │ │ ├── slider.webp │ │ │ ├── social-logo.webp │ │ │ ├── table-dark.webp │ │ │ ├── table.webp │ │ │ ├── tooltip-dark.webp │ │ │ ├── tooltip.webp │ │ │ ├── tooltips │ │ │ │ ├── tooltip-bottom.png │ │ │ │ ├── tooltip-left.png │ │ │ │ ├── tooltip-right.png │ │ │ │ └── tooltip-top.png │ │ │ ├── tree-view-dark.webp │ │ │ ├── tree-view.webp │ │ │ └── twitter.webp │ │ └── js │ │ │ ├── components.page.js │ │ │ └── main.js │ ├── favicon.svg │ ├── humans.txt │ ├── robots-beta.txt │ └── robots.txt ├── src │ ├── _data │ │ ├── componentsDetails.json │ │ ├── getComponentDetails.ts │ │ └── site.json │ ├── components │ │ ├── ApiPanel.astro │ │ ├── BannerLogo.astro │ │ ├── ComponentCard.astro │ │ ├── ComponentSectionNav.astro │ │ ├── Footer.astro │ │ ├── Highlighter.astro │ │ ├── HighlighterCard.astro │ │ └── OverviewPanel.astro │ ├── env.d.ts │ ├── layouts │ │ ├── Base.astro │ │ ├── Component.astro │ │ ├── Default.astro │ │ └── Post.astro │ ├── pages │ │ ├── 404.astro │ │ ├── blog │ │ │ ├── index.astro │ │ │ └── posts │ │ │ │ ├── 2023-08-03-whats-up-nerds.astro │ │ │ │ └── 2023-08-04-goatui-first-release.astro │ │ ├── components.astro │ │ ├── components │ │ │ ├── accordion-item │ │ │ │ └── index.astro │ │ │ ├── accordion │ │ │ │ ├── _sections │ │ │ │ │ ├── Multiple.astro │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── avatar │ │ │ │ ├── _sections │ │ │ │ │ ├── Sizes.astro │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── badge │ │ │ │ ├── _sections │ │ │ │ │ ├── Examples.astro │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── breadcrumb │ │ │ │ ├── _sections │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── button-group │ │ │ │ ├── _sections │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── button │ │ │ │ ├── _sections │ │ │ │ │ ├── Colors.astro │ │ │ │ │ ├── Events.astro │ │ │ │ │ ├── Icon.astro │ │ │ │ │ ├── Kind.astro │ │ │ │ │ ├── Sizes.astro │ │ │ │ │ ├── States.astro │ │ │ │ │ ├── Usage.astro │ │ │ │ │ └── Variants.astro │ │ │ │ └── index.astro │ │ │ ├── calendar │ │ │ │ ├── _sections │ │ │ │ │ ├── Month.astro │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── canvas │ │ │ │ ├── _sections │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── chart-doughnut │ │ │ │ ├── _sections │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── chart-pie │ │ │ │ ├── _sections │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── checkbox │ │ │ │ ├── _sections │ │ │ │ │ ├── Disabled.astro │ │ │ │ │ ├── Events.astro │ │ │ │ │ ├── Intermediate.astro │ │ │ │ │ ├── Readonly.astro │ │ │ │ │ ├── Sizes.astro │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── code-editor │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── code-highlighter │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── condition-builder │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── current-time │ │ │ │ ├── _sections │ │ │ │ │ ├── timezone.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── date-picker │ │ │ │ ├── _sections │ │ │ │ │ ├── disabled.astro │ │ │ │ │ ├── events.astro │ │ │ │ │ ├── sizes.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── divider │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── dropdown │ │ │ │ ├── _sections │ │ │ │ │ ├── Placements.astro │ │ │ │ │ ├── Usage.astro │ │ │ │ │ └── dropdown-menu.astro │ │ │ │ └── index.astro │ │ │ ├── empty-state │ │ │ │ ├── _sections │ │ │ │ │ ├── full-page.astro │ │ │ │ │ └── menu.astro │ │ │ │ └── index.astro │ │ │ ├── flow-designer │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── footer │ │ │ │ ├── _sections │ │ │ │ │ ├── header-content.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── form-control │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── header │ │ │ │ ├── _sections │ │ │ │ │ ├── app-header.astro │ │ │ │ │ ├── header-content.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── html-editor │ │ │ │ ├── _sections │ │ │ │ │ ├── disabled.astro │ │ │ │ │ ├── theme.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── icon │ │ │ │ ├── _sections │ │ │ │ │ ├── sizes.astro │ │ │ │ │ ├── usage.astro │ │ │ │ │ └── variants.astro │ │ │ │ └── index.astro │ │ │ ├── input │ │ │ │ ├── _sections │ │ │ │ │ ├── events.astro │ │ │ │ │ ├── sizes.astro │ │ │ │ │ ├── slots.astro │ │ │ │ │ ├── states.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── link │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── menu │ │ │ │ ├── _sections │ │ │ │ │ ├── events.astro │ │ │ │ │ ├── slots.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── modal-content │ │ │ │ └── index.astro │ │ │ ├── modal │ │ │ │ ├── _sections │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── notification-manager │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── notification │ │ │ │ ├── _sections │ │ │ │ │ ├── HighContrastSection.astro │ │ │ │ │ ├── States.astro │ │ │ │ │ ├── Usage.astro │ │ │ │ │ └── notification-content.astro │ │ │ │ └── index.astro │ │ │ ├── number │ │ │ │ ├── _sections │ │ │ │ │ ├── events.astro │ │ │ │ │ ├── slots.astro │ │ │ │ │ ├── states.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── popover-content │ │ │ │ └── index.astro │ │ │ ├── popover │ │ │ │ ├── _sections │ │ │ │ │ ├── Placements.astro │ │ │ │ │ ├── Tip.astro │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── progress │ │ │ │ ├── _sections │ │ │ │ │ ├── sizes.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── select │ │ │ │ ├── _sections │ │ │ │ │ ├── managed.astro │ │ │ │ │ ├── multi-select.astro │ │ │ │ │ ├── search.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── sidenav │ │ │ │ ├── _sections │ │ │ │ │ ├── events.astro │ │ │ │ │ ├── icon-menu.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── slider │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── spinner │ │ │ │ ├── _sections │ │ │ │ │ ├── sizes.astro │ │ │ │ │ ├── usage.astro │ │ │ │ │ └── variants.astro │ │ │ │ └── index.astro │ │ │ ├── svg │ │ │ │ ├── _sections │ │ │ │ │ ├── sizes.astro │ │ │ │ │ ├── usage.astro │ │ │ │ │ └── variants.astro │ │ │ │ └── index.astro │ │ │ ├── table │ │ │ │ ├── _column-config.json │ │ │ │ ├── _data-source.json │ │ │ │ ├── _sections │ │ │ │ │ ├── empty.html │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── tabs │ │ │ │ ├── _sections │ │ │ │ │ ├── Contained.astro │ │ │ │ │ ├── Icons.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── tag │ │ │ │ ├── _sections │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── text │ │ │ │ ├── _sections │ │ │ │ │ ├── body-styles.astro │ │ │ │ │ ├── color-variants.astro │ │ │ │ │ ├── fixed-heading-styles.astro │ │ │ │ │ ├── fluid-heading-styles.astro │ │ │ │ │ └── utility-styles.astro │ │ │ │ └── index.astro │ │ │ ├── textarea │ │ │ │ ├── _sections │ │ │ │ │ ├── disabled.html │ │ │ │ │ ├── events.astro │ │ │ │ │ ├── states.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── time-picker │ │ │ │ ├── _sections │ │ │ │ │ ├── disabled.astro │ │ │ │ │ ├── events.astro │ │ │ │ │ ├── sizes.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── toggle │ │ │ │ ├── _sections │ │ │ │ │ ├── events.astro │ │ │ │ │ ├── sizes.astro │ │ │ │ │ ├── states.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ ├── tooltip │ │ │ │ ├── _sections │ │ │ │ │ ├── Shared.astro │ │ │ │ │ └── Usage.astro │ │ │ │ └── index.astro │ │ │ ├── tree-view │ │ │ │ ├── _sections │ │ │ │ │ ├── events.astro │ │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ │ └── url-input │ │ │ │ ├── _sections │ │ │ │ ├── events.astro │ │ │ │ ├── sizes.astro │ │ │ │ ├── slots.astro │ │ │ │ ├── states.astro │ │ │ │ └── usage.astro │ │ │ │ └── index.astro │ │ ├── index.astro │ │ ├── license.astro │ │ ├── privacy.astro │ │ ├── test.astro │ │ └── theme-creator.astro │ └── styles │ │ ├── base.layout.scss │ │ ├── blog.scss │ │ ├── component.layout.scss │ │ ├── components.page.scss │ │ ├── device-utils.scss │ │ ├── index.page.scss │ │ ├── mixin.scss │ │ └── post.scss └── tsconfig.json ├── bin ├── clean-branches.sh └── pull-carbon-deps.ts ├── env.js ├── package-lock.json ├── package.json ├── qodana.yaml ├── readme.md ├── releaseToDocs.js ├── research ├── Screenshot 2022-08-03 084633.png ├── loader.html └── quote.svg ├── robots.txt ├── src ├── 3d-party │ ├── d3js │ │ └── index.tsx │ ├── monaco │ │ ├── editor.main.scss │ │ └── index.tsx │ └── prism │ │ ├── index.tsx │ │ ├── prism-line-numbers.scss │ │ └── prism.scss ├── assets │ ├── images │ │ └── empty-state │ │ │ ├── no-document.svg │ │ │ ├── page.svg │ │ │ └── search.svg │ ├── package-lock.json │ ├── package.json │ └── styles │ │ ├── theme.css │ │ └── theme.css.map ├── components.d.ts ├── components │ ├── accordion │ │ ├── accordion-item │ │ │ ├── accordion-item.scss │ │ │ ├── accordion-item.tsx │ │ │ └── readme.md │ │ └── accordion │ │ │ ├── accordion.scss │ │ │ ├── accordion.tsx │ │ │ └── readme.md │ ├── application │ │ ├── calendar │ │ │ └── calendar │ │ │ │ ├── CalendarEvent.tsx │ │ │ │ ├── calendar.scss │ │ │ │ ├── calendar.tsx │ │ │ │ ├── column-view │ │ │ │ ├── ColumnEventManager.tsx │ │ │ │ ├── column-view-background │ │ │ │ │ ├── column-view-background.scss │ │ │ │ │ ├── column-view-background.tsx │ │ │ │ │ └── readme.md │ │ │ │ ├── column-view.scss │ │ │ │ ├── column-view.tsx │ │ │ │ ├── readme.md │ │ │ │ └── utils.tsx │ │ │ │ ├── demo.data.ts │ │ │ │ ├── event-management │ │ │ │ ├── BaseEvent.tsx │ │ │ │ └── EventManager.tsx │ │ │ │ ├── month-view │ │ │ │ ├── MonthEventManager.tsx │ │ │ │ ├── month-view-background │ │ │ │ │ ├── month-view-background.scss │ │ │ │ │ ├── month-view-background.tsx │ │ │ │ │ └── readme.md │ │ │ │ ├── month-view.scss │ │ │ │ ├── month-view.tsx │ │ │ │ ├── readme.md │ │ │ │ └── utils.tsx │ │ │ │ ├── readme.md │ │ │ │ ├── types.tsx │ │ │ │ └── utils.tsx │ │ ├── code-highlighter │ │ │ ├── code-highlighter.scss │ │ │ ├── code-highlighter.tsx │ │ │ ├── constants.ts │ │ │ └── readme.md │ │ ├── condition-builder │ │ │ ├── cb-compound-expression │ │ │ │ ├── cb-compound-expression.scss │ │ │ │ ├── cb-compound-expression.tsx │ │ │ │ └── readme.md │ │ │ ├── cb-divider │ │ │ │ ├── cb-divider.scss │ │ │ │ ├── cb-divider.tsx │ │ │ │ └── readme.md │ │ │ ├── cb-expression │ │ │ │ ├── cb-expression.scss │ │ │ │ ├── cb-expression.tsx │ │ │ │ └── readme.md │ │ │ ├── cb-predicate │ │ │ │ ├── cb-predicate.scss │ │ │ │ ├── cb-predicate.tsx │ │ │ │ └── readme.md │ │ │ └── condition-builder │ │ │ │ ├── condition-builder.scss │ │ │ │ ├── condition-builder.tsx │ │ │ │ └── readme.md │ │ ├── current-time │ │ │ ├── current-time.scss │ │ │ ├── current-time.spec.tsx │ │ │ ├── current-time.tsx │ │ │ └── readme.md │ │ ├── empty-state │ │ │ ├── empty-state.scss │ │ │ ├── empty-state.tsx │ │ │ └── readme.md │ │ ├── flow-designer │ │ │ ├── canvas │ │ │ │ ├── canvas.scss │ │ │ │ ├── canvas.tsx │ │ │ │ └── readme.md │ │ │ └── flow-designer │ │ │ │ ├── flow-designer.scss │ │ │ │ ├── flow-designer.tsx │ │ │ │ └── readme.md │ │ ├── footer │ │ │ ├── footer-copyright │ │ │ │ ├── footer-copyright.scss │ │ │ │ ├── footer-copyright.tsx │ │ │ │ └── readme.md │ │ │ ├── footer-links │ │ │ │ ├── footer-links.scss │ │ │ │ ├── footer-links.tsx │ │ │ │ └── readme.md │ │ │ └── footer │ │ │ │ ├── footer.scss │ │ │ │ ├── footer.tsx │ │ │ │ └── readme.md │ │ ├── header │ │ │ ├── header-action │ │ │ │ ├── header-action.scss │ │ │ │ ├── header-action.tsx │ │ │ │ └── readme.md │ │ │ ├── header-brand │ │ │ │ ├── header-brand.scss │ │ │ │ ├── header-brand.tsx │ │ │ │ └── readme.md │ │ │ └── header │ │ │ │ ├── header.scss │ │ │ │ ├── header.tsx │ │ │ │ └── readme.md │ │ ├── sidenav-menu-item │ │ │ ├── readme.md │ │ │ ├── sidenav-menu-item.scss │ │ │ └── sidenav-menu-item.tsx │ │ ├── sidenav-menu │ │ │ ├── readme.md │ │ │ ├── sidenav-menu.scss │ │ │ └── sidenav-menu.tsx │ │ └── sidenav │ │ │ ├── readme.md │ │ │ ├── sidenav.scss │ │ │ └── sidenav.tsx │ ├── avatar │ │ ├── avatar.scss │ │ ├── avatar.tsx │ │ └── readme.md │ ├── badge │ │ ├── badge.scss │ │ ├── badge.tsx │ │ └── readme.md │ ├── breadcrumb │ │ ├── breadcrumb-item │ │ │ ├── breadcrumb-item.scss │ │ │ ├── breadcrumb-item.tsx │ │ │ └── readme.md │ │ ├── breadcrumb.scss │ │ ├── breadcrumb.tsx │ │ └── readme.md │ ├── button │ │ ├── button-group │ │ │ ├── button-group.scss │ │ │ ├── button-group.tsx │ │ │ └── readme.md │ │ └── button │ │ │ ├── button.scss │ │ │ ├── button.spec.tsx │ │ │ ├── button.tsx │ │ │ └── readme.md │ ├── card │ │ ├── card.scss │ │ ├── card.tsx │ │ └── readme.md │ ├── charts │ │ ├── chart-colors.ts │ │ ├── chart-doughnut │ │ │ ├── chart-doughnut.scss │ │ │ ├── chart-doughnut.tsx │ │ │ └── readme.md │ │ ├── chart-pie │ │ │ ├── chart-pie.scss │ │ │ ├── chart-pie.tsx │ │ │ └── readme.md │ │ └── pie │ │ │ ├── pie.scss │ │ │ └── pie.ts │ ├── container │ │ ├── container.scss │ │ ├── container.tsx │ │ └── readme.md │ ├── divider │ │ ├── divider.scss │ │ ├── divider.tsx │ │ └── readme.md │ ├── dropdown │ │ ├── dropdown-menu │ │ │ ├── dropdown-menu.scss │ │ │ ├── dropdown-menu.tsx │ │ │ └── readme.md │ │ └── dropdown │ │ │ ├── dropdown.scss │ │ │ ├── dropdown.tsx │ │ │ └── readme.md │ ├── icon │ │ ├── constants.ts │ │ ├── datasource.ts │ │ ├── icon.scss │ │ ├── icon.tsx │ │ ├── icons.ts │ │ └── readme.md │ ├── image │ │ ├── image.scss │ │ ├── image.tsx │ │ └── readme.md │ ├── input-controls │ │ ├── checkbox │ │ │ ├── checkbox.scss │ │ │ ├── checkbox.tsx │ │ │ └── readme.md │ │ ├── code-editor │ │ │ ├── code-editor.scss │ │ │ ├── code-editor.tsx │ │ │ └── readme.md │ │ ├── common-input.scss │ │ ├── data-and-time │ │ │ └── date │ │ │ │ ├── date-picker │ │ │ │ ├── date-picker.scss │ │ │ │ ├── date-picker.tsx │ │ │ │ └── readme.md │ │ │ │ └── time-picker │ │ │ │ ├── readme.md │ │ │ │ ├── time-picker.scss │ │ │ │ └── time-picker.tsx │ │ ├── form-control │ │ │ ├── form-control.scss │ │ │ ├── form-control.tsx │ │ │ └── readme.md │ │ ├── html-editor │ │ │ ├── html-editor.scss │ │ │ ├── html-editor.tsx │ │ │ └── readme.md │ │ ├── input.interface.tsx │ │ ├── input │ │ │ ├── input │ │ │ │ ├── input.scss │ │ │ │ ├── input.tsx │ │ │ │ └── readme.md │ │ │ ├── number │ │ │ │ ├── number.scss │ │ │ │ ├── number.tsx │ │ │ │ └── readme.md │ │ │ └── textarea │ │ │ │ ├── readme.md │ │ │ │ ├── textarea.scss │ │ │ │ └── textarea.tsx │ │ ├── select │ │ │ ├── readme.md │ │ │ ├── select.scss │ │ │ └── select.tsx │ │ ├── slider │ │ │ ├── readme.md │ │ │ ├── slider.scss │ │ │ └── slider.tsx │ │ └── toggle │ │ │ ├── readme.md │ │ │ ├── toggle.scss │ │ │ └── toggle.tsx │ ├── link │ │ ├── link.scss │ │ ├── link.tsx │ │ └── readme.md │ ├── menu │ │ ├── menu-divider │ │ │ ├── menu-divider.scss │ │ │ ├── menu-divider.tsx │ │ │ └── readme.md │ │ ├── menu-item │ │ │ ├── menu-item.scss │ │ │ ├── menu-item.tsx │ │ │ └── readme.md │ │ └── menu │ │ │ ├── menu.scss │ │ │ ├── menu.tsx │ │ │ └── readme.md │ ├── modal │ │ ├── modal-content │ │ │ ├── modal-content.scss │ │ │ ├── modal-content.tsx │ │ │ └── readme.md │ │ └── modal │ │ │ ├── modal.scss │ │ │ ├── modal.tsx │ │ │ └── readme.md │ ├── notification-manager │ │ ├── notification-manager.scss │ │ ├── notification-manager.tsx │ │ └── readme.md │ ├── notification │ │ ├── notification.scss │ │ ├── notification.tsx │ │ └── readme.md │ ├── popover │ │ ├── popover-content │ │ │ ├── popover-content.scss │ │ │ ├── popover-content.tsx │ │ │ └── readme.md │ │ ├── popover │ │ │ ├── PopoverController.tsx │ │ │ ├── popover.scss │ │ │ ├── popover.tsx │ │ │ └── readme.md │ │ └── types.tsx │ ├── progress │ │ ├── progress.scss │ │ ├── progress.tsx │ │ └── readme.md │ ├── spinner │ │ ├── readme.md │ │ ├── spinner.scss │ │ └── spinner.tsx │ ├── svg │ │ ├── datasource.ts │ │ ├── readme.md │ │ ├── svg.scss │ │ └── svg.tsx │ ├── table │ │ ├── readme.md │ │ ├── table.scss │ │ └── table.tsx │ ├── tabs │ │ ├── tab-panel │ │ │ ├── readme.md │ │ │ ├── tab-panel.scss │ │ │ └── tab-panel.tsx │ │ ├── tab │ │ │ ├── readme.md │ │ │ ├── tab.scss │ │ │ └── tab.tsx │ │ ├── tabs-list │ │ │ ├── readme.md │ │ │ ├── tabs-list.scss │ │ │ └── tabs-list.tsx │ │ └── tabs │ │ │ ├── readme.md │ │ │ ├── tabs.scss │ │ │ └── tabs.tsx │ ├── tag │ │ ├── readme.md │ │ ├── tag.scss │ │ └── tag.tsx │ ├── tooltip │ │ ├── readme.md │ │ ├── tooltip.scss │ │ └── tooltip.tsx │ ├── tree-view │ │ ├── tree-node │ │ │ ├── readme.md │ │ │ ├── tree-node.scss │ │ │ └── tree-node.tsx │ │ └── tree-view │ │ │ ├── readme.md │ │ │ ├── tree-view.scss │ │ │ └── tree-view.tsx │ ├── typography │ │ └── text │ │ │ ├── readme.md │ │ │ ├── text.scss │ │ │ └── text.tsx │ └── url-input │ │ ├── readme.md │ │ ├── url-input.scss │ │ └── url-input.tsx ├── globalStyles │ ├── commons.scss │ ├── functions.scss │ ├── mixins.scss │ └── theme │ │ ├── css-variables.scss │ │ ├── theme.scss │ │ └── tokens │ │ ├── _breakpoints.scss │ │ ├── _common.scss │ │ ├── _shadow.scss │ │ ├── _spacing.scss │ │ ├── _typography.scss │ │ └── color │ │ ├── background-colors.scss │ │ ├── base.scss │ │ ├── border-colors.scss │ │ ├── field-colors.scss │ │ ├── icon-colors.scss │ │ ├── index.scss │ │ ├── layer-colors.scss │ │ ├── skeleton-colors.scss │ │ └── text-colors.scss ├── index.html ├── index.ts └── utils │ ├── constants.ts │ └── utils.tsx ├── stencil.config.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [shivajivarma] 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | push: 5 | # Sequence of patterns matched against refs/heads 6 | branches: 7 | - main 8 | - 'releases/**' 9 | 10 | jobs: 11 | build: 12 | 13 | runs-on: ubuntu-latest 14 | 15 | strategy: 16 | matrix: 17 | node-version: [18.x] 18 | 19 | steps: 20 | - uses: actions/checkout@v1 21 | - name: Use Node.js ${{ matrix.node-version }} 22 | uses: actions/setup-node@v1 23 | with: 24 | node-version: ${{ matrix.node-version }} 25 | 26 | - name: Cache node modules 27 | uses: actions/cache@v3 28 | with: 29 | path: node_modules 30 | key: node_modules-${{hashFiles('package-lock.json')}} 31 | restore-keys: node_modules- # Take any latest cache if failed to find it for current yarn.lock 32 | 33 | - name: npm install, build, and test 34 | run: | 35 | npm ci 36 | npm run build --if-present 37 | env: 38 | CI: true 39 | 40 | - id: publish 41 | uses: JS-DevTools/npm-publish@v1 42 | with: 43 | token: ${{ secrets.NPM_TOKEN }} 44 | -------------------------------------------------------------------------------- /.github/workflows/deploy-website.yml: -------------------------------------------------------------------------------- 1 | name: Deploy website 2 | 3 | on: 4 | workflow_dispatch: 5 | 6 | jobs: 7 | build: 8 | 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - name: Testing ssh 13 | run: | 14 | echo "Hello world" 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | www/ 3 | loader/ 4 | docs/assets/goatui-dev/ 5 | 6 | *~ 7 | *.sw[mnpcod] 8 | *.log 9 | *.lock 10 | *.tmp 11 | *.tmp.* 12 | log.txt 13 | *.sublime-project 14 | *.sublime-workspace 15 | 16 | .stencil/ 17 | .idea/ 18 | .vscode/ 19 | .sass-cache/ 20 | .versions/ 21 | node_modules/ 22 | $RECYCLE.BIN/ 23 | 24 | .DS_Store 25 | Thumbs.db 26 | UserInterfaceState.xcuserstate 27 | .env 28 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxBracketSameLine": false, 5 | "jsxSingleQuote": false, 6 | "quoteProps": "consistent", 7 | "semi": true, 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "all", 11 | "useTabs": false 12 | } 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 SHIVAJI VARMA 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /astro-docs/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /astro-docs/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | 4 | # generated types 5 | .astro/ 6 | 7 | # dependencies 8 | node_modules/ 9 | 10 | # logs 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | public/assets/goatui-dev/ 24 | -------------------------------------------------------------------------------- /astro-docs/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxBracketSameLine": false, 5 | "jsxSingleQuote": false, 6 | "quoteProps": "consistent", 7 | "printWidth": 180, 8 | "semi": true, 9 | "singleQuote": true, 10 | "tabWidth": 2, 11 | "trailingComma": "all", 12 | "useTabs": false 13 | } 14 | -------------------------------------------------------------------------------- /astro-docs/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'astro/config'; 2 | import sitemap from '@astrojs/sitemap'; 3 | import mdx from '@astrojs/mdx'; 4 | 5 | // https://astro.build/config 6 | export default defineConfig({ 7 | devToolbar: { enabled: false }, 8 | site: 'https://goatui.com', 9 | compressHTML: false, 10 | server: { port: 4000, host: true }, 11 | integrations: [sitemap(), mdx()], 12 | }, 13 | ); 14 | -------------------------------------------------------------------------------- /astro-docs/bin/convert-to-webp.ts: -------------------------------------------------------------------------------- 1 | import * as sharp from 'npm:sharp@0.33.4'; 2 | import { walkSync } from 'https://deno.land/std@0.193.0/fs/mod.ts'; 3 | 4 | for (const file of walkSync('../public/assets/img', { 5 | maxDepth: 1, 6 | includeDirs: false, 7 | exts: ['.png'], 8 | })) { 9 | sharp.default(file.path).toFile(file.path.replace('.png', '.webp'), (err, info) => { 10 | console.log(err, info); 11 | }); 12 | } 13 | 14 | /** 15 | * ```cmd 16 | * deno run -A convert-to-webp.ts 17 | * ``` 18 | */ 19 | -------------------------------------------------------------------------------- /astro-docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "goatui-docs", 3 | "type": "module", 4 | "version": "1.0.0", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro build --logLevel error", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/check": "^0.7.0", 14 | "@astrojs/sitemap": "^3.1.5", 15 | "@astrojs/mdx": "^3.1.0", 16 | "astro": "^4.9.2", 17 | "sass": "^1.77.4", 18 | "typescript": "^5.4.5" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /astro-docs/public/ads.txt: -------------------------------------------------------------------------------- 1 | google.com, pub-3120721550776061, DIRECT, f08c47fec0942fa0 -------------------------------------------------------------------------------- /astro-docs/public/assets/img/accordion-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/accordion-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/accordion.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/accordion.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/avatar.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/avatar.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/avatar.xs.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/avatar.xs.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/calendar-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/calendar-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/calendar.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/calendar.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/canvas.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/canvas.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/chart-doughnut-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/chart-doughnut-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/chart-doughnut.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/chart-doughnut.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/chart-pie-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/chart-pie-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/chart-pie.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/chart-pie.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/code-editor-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/code-editor-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/code-editor.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/code-editor.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/code-highlighter-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/code-highlighter-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/code-highlighter.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/code-highlighter.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/condition-builder.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/condition-builder.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/dropdown-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/dropdown-dark.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/dropdown-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/dropdown-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/dropdown.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/dropdown.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/dropdown.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/empty-state-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/empty-state-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/empty-state.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/empty-state.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/flow-designer.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/flow-designer.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/footer-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/footer-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/footer.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/footer.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/header-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/header-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/header.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/header.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/html-editor-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/html-editor-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/html-editor.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/html-editor.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/image-not-found.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/image-not-found.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/list.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/list.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/logo.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/menu-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/menu-dark.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/menu-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/menu-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/menu.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/menu.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/menu.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/modal-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/modal-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/modal.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/modal.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/modals/modal-basic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/modals/modal-basic.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/modals/modal-large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/modals/modal-large.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/modals/modal-long.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/modals/modal-long.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/modals/modal-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/modals/modal-small.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/modals/modal-vertically-centered.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/modals/modal-vertically-centered.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/no-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/no-image.jpg -------------------------------------------------------------------------------- /astro-docs/public/assets/img/notification-manager-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/notification-manager-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/notification-manager.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/notification-manager.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/popovers/popover-bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/popovers/popover-bottom.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/popovers/popover-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/popovers/popover-left.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/popovers/popover-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/popovers/popover-right.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/popovers/popover-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/popovers/popover-top.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/select-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/select-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/select.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/select.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/slider-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/slider-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/slider.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/slider.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/social-logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/social-logo.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/table-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/table-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/table.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/table.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/tooltip-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/tooltip-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/tooltip.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/tooltip.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/tooltips/tooltip-bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/tooltips/tooltip-bottom.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/tooltips/tooltip-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/tooltips/tooltip-left.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/tooltips/tooltip-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/tooltips/tooltip-right.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/tooltips/tooltip-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/tooltips/tooltip-top.png -------------------------------------------------------------------------------- /astro-docs/public/assets/img/tree-view-dark.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/tree-view-dark.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/tree-view.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/tree-view.webp -------------------------------------------------------------------------------- /astro-docs/public/assets/img/twitter.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/astro-docs/public/assets/img/twitter.webp -------------------------------------------------------------------------------- /astro-docs/public/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | 10 | -------------------------------------------------------------------------------- /astro-docs/public/humans.txt: -------------------------------------------------------------------------------- 1 | ____ __ __ __ 2 | /\ _`\ /\ \ __ __ __ /\ \/\ \ 3 | \ \,\L\_\ \ \___ /\_\ __ __ __ /\_\/\_\ \ \ \ \ \ __ _ __ ___ ___ __ 4 | \/_\__ \\ \ _ `\/\ \/\ \/\ \ /'__`\ \/\ \/\ \ \ \ \ \ \ /'__`\ /\`'__\/' __` __`\ /'__`\ 5 | /\ \L\ \ \ \ \ \ \ \ \ \_/ |/\ \L\.\_ \ \ \ \ \ \ \ \_/ \/\ \L\.\_\ \ \/ /\ \/\ \/\ \/\ \L\.\_ 6 | \ `\____\ \_\ \_\ \_\ \___/ \ \__/.\_\_\ \ \ \_\ \ `\___/\ \__/.\_\\ \_\ \ \_\ \_\ \_\ \__/.\_\ 7 | \/_____/\/_/\/_/\/_/\/__/ \/__/\/_/\ \_\ \/_/ `\/__/ \/__/\/_/ \/_/ \/_/\/_/\/_/\/__/\/_/ 8 | \ \____/ 9 | \/___/ 10 | -------------------------------------------------------------------------------- /astro-docs/public/robots-beta.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: / 3 | -------------------------------------------------------------------------------- /astro-docs/public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Allow: / 3 | Sitemap: https://goatui.com/sitemap-index.xml 4 | -------------------------------------------------------------------------------- /astro-docs/src/components/Footer.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import site from '../_data/site.json'; 3 | --- 4 | 5 | 7 | 8 | 17 | 18 | -------------------------------------------------------------------------------- /astro-docs/src/components/Highlighter.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | format?: boolean; 4 | lang: any; 5 | } 6 | 7 | const {lang, format} = Astro.props; 8 | 9 | let html = ''; 10 | if (Astro.slots.has('default')) { 11 | html = await Astro.slots.render('default'); 12 | html = html.replaceAll('', '</script>'); 13 | } 14 | --- 15 | 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /astro-docs/src/components/HighlighterCard.astro: -------------------------------------------------------------------------------- 1 | --- 2 | interface Props { 3 | cssClasses?: string; 4 | lang: any; 5 | } 6 | 7 | const { lang, cssClasses } = Astro.props; 8 | 9 | let html = ''; 10 | if (Astro.slots.has('default')) { 11 | html = await Astro.slots.render('default'); 12 | html = html.replaceAll('<', '<'); 13 | html = html.replaceAll('', '</script>'); 14 | } 15 | --- 16 | 17 | 18 |
19 | 20 |
21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /astro-docs/src/components/OverviewPanel.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import ComponentSectionNav from './ComponentSectionNav.astro'; 3 | interface Props { 4 | componentDetails: any; 5 | sections: any; 6 | } 7 | 8 | const { componentDetails, sections } = Astro.props; 9 | --- 10 |
11 | 12 |
13 |
14 | 15 |
16 | { 17 | sections.map((section) => ( 18 |
20 | {section.title} 21 | 22 | 23 |
)) 24 | } 25 |
26 | 27 |
28 | -------------------------------------------------------------------------------- /astro-docs/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /astro-docs/src/pages/404.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../layouts/Base.astro'; 3 | --- 4 | 5 | 9 | 10 | 11 | 17 | 18 | -------------------------------------------------------------------------------- /astro-docs/src/pages/blog/posts/2023-08-03-whats-up-nerds.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Post.astro'; 3 | import '../../../styles/post.scss'; 4 | export const title = 'What\'s up nerds?'; 5 | export const description = 'Welcome one and all to the new, official GOATUI blog. From now on, I will be posting info on new releases, documentation changes, great examples of folks using GOATUI, and more. Stay tuned for our first post on the next two updates for the project.'; 6 | export const publishedDate = "2023-08-03"; 7 | --- 8 | 9 | 10 | {description} 11 | 12 | 13 | -------------------------------------------------------------------------------- /astro-docs/src/pages/blog/posts/2023-08-04-goatui-first-release.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Post.astro'; 3 | import '../../../styles/post.scss'; 4 | export const title = 'GOATUI 1.0'; 5 | export const description = `Hi all! 👋 We are goatui, a collective of open source and web component enthusiasts. We consider it our goal to empower everyone with a powerful and battle-tested setup for creating and sharing open source customizable web components.`; 6 | export const publishedDate = "2023-08-03"; 7 | --- 8 | 9 | 10 | { description } 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/accordion-item/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | const componentDetails = getComponentDetails('goat-accordion-item'); 6 | --- 7 | 8 | 9 | 10 | API 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/avatar/_sections/Sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/avatar/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 |
6 | 7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/badge/_sections/Examples.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/badge/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/breadcrumb/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | Home 7 | Page 8 | 9 | 10 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/breadcrumb/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | const componentDetails = getComponentDetails('goat-breadcrumb'); 6 | 7 | import UsageSection from './_sections/Usage.astro'; 8 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/button-group/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | const componentDetails = getComponentDetails('goat-button-group'); 6 | 7 | import UsageSection from './_sections/Usage.astro'; 8 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/button/_sections/Events.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | import Highlighter from '../../../../components/Highlighter.astro'; 4 | --- 5 | 6 | Click me 7 | Disabled Button 8 | 9 | 17 | 18 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/button/_sections/Icon.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 |
6 | 7 | Add 8 | 9 | Previous 10 | Next 11 |
12 | 13 |
14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/button/_sections/Kind.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 |
6 | Default long button 7 |
8 |
9 | Simple text button 10 |
11 |
12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/button/_sections/Sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller buttons? Add size attribute for additional sizes. 5 | 6 | 7 | Small 8 | Medium 9 | Large 10 | XL Button 11 | 2XL Button 12 | 13 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/button/_sections/Variants.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | Here are several predefined button styles, each serving its own semantic purpose. 6 | 7 | 8 | Mix and match the `variant` and `sub-variant` to create a variety of buttons. 9 | `"simple"` is a simple button without default padding at end. 10 | `"block"` is a full-width button that spans the full width of its container. 11 | 12 | 13 | 14 | Default 15 | 16 | Light 17 | 18 | Outline 19 | 20 | Ghost 21 | 22 | Neo-Brutalism 23 | 24 | 25 |
26 |
27 | 28 |
29 | Light & Simple 30 |
31 | 32 |
33 | Default & Block 34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/canvas/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 27 | 28 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/canvas/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | const componentDetails = getComponentDetails('goat-canvas'); 6 | 7 | import UsageSection from './_sections/Usage.astro'; 8 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/chart-doughnut/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | const componentDetails = getComponentDetails('goat-chart-doughnut'); 6 | 7 | import UsageSection from './_sections/Usage.astro'; 8 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/chart-pie/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | Randomize 7 |
8 | 9 | 10 | 11 | 12 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/chart-pie/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | const componentDetails = getComponentDetails('goat-chart-pie'); 6 | 7 | import UsageSection from './_sections/Usage.astro'; 8 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/checkbox/_sections/Disabled.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Make input look inactive by adding the disabled boolean 6 | attribute to any 7 | <input> element. 8 | 10 | 11 | 12 | Disabled checkbox 13 | Disabled checkbox 14 | 15 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/checkbox/_sections/Events.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Highlighter from '../../../../components/Highlighter.astro'; 3 | --- 4 | On change of checkbox value a CustomEvent goat:change is triggered by 6 | the element. 7 | 8 | 9 | 10 | 11 | Change Event? 12 | 17 | 18 | 19 | 20 | 21 | document.querySelector('#change-checkbox-field').addEventListener('goat-checkbox--change', 22 | function(event) { 23 | console.log('Input changed to :: ' + event.target.value); 24 | }); 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/checkbox/_sections/Intermediate.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | All 6 | 7 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/checkbox/_sections/Readonly.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Make input look inactive by adding the disabled boolean 6 | attribute to any 7 | <input> element. 8 | 10 | 11 | 12 | Readonly checkbox 13 | Readonly checkbox 14 | 15 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/checkbox/_sections/Sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Here are several predefined checkbox sizes, each serving its own semantic purpose. 5 | 6 | 7 | Large 8 | Medium 9 | 10 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/checkbox/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Here are several predefined checkbox styles, each serving its own semantic purpose. 5 | 6 | 7 | Male 8 | Want ice cream? 9 | Join the group? 10 | 11 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/code-highlighter/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | const componentDetails = getComponentDetails('goat-code-highlighter'); 6 | 7 | import UsageSection from './_sections/usage.astro'; 8 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/current-time/_sections/timezone.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | (Local) 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/current-time/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/date-picker/_sections/disabled.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | Make input look inactive by adding the disabled boolean 7 | attribute to any 8 | <input> element. 9 | 10 | 11 | 12 | 13 | 14 | 15 | Read only 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/date-picker/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | Fancy larger or smaller input? Add size attribute for additional sizes. 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/date-picker/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | Here are different types of inputs. 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/dropdown/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | import MenuItems from './dropdown-menu.astro'; 4 | --- 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/dropdown/_sections/dropdown-menu.astro: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | Cut 7 | ⌘X 8 | 9 | 10 | Copy 11 | ⌘C 12 | 13 | 14 | Paste 15 | ⌘X 16 | 17 | 18 | 19 | Bold 20 | 21 | 22 | Italic 23 | 24 | 25 | 26 | Delete 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/empty-state/_sections/full-page.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 13 |
14 | Go to home page 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/empty-state/_sections/menu.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/flow-designer/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 22 | 23 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/flow-designer/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 6 | const componentDetails = getComponentDetails('goat-flow-designer'); 7 | 8 | import UsageSection from './_sections/usage.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/footer/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | import HeaderContent from './header-content.astro'; 4 | --- 5 | 6 | 11 | 12 | 13 |
14 | 15 | 18 | 19 | 20 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/form-control/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 6 | const componentDetails = getComponentDetails('goat-form-control'); 7 | 8 | import UsageSection from './_sections/usage.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/html-editor/_sections/disabled.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Highlighter from '../../../../components/Highlighter.astro'; 3 | --- 4 | 5 | Make editor look inactive by adding the disabled boolean 7 | attribute to any 8 | <input> element. 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 |
17 |
18 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/html-editor/_sections/theme.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Highlighter from '../../../../components/Highlighter.astro'; 3 | --- 4 | 5 | Please click on checkbox and try disabling able editor. 6 | 7 |
8 |
9 | 10 | 11 | 12 |
13 |
14 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/icon/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller icons? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/icon/_sections/variants.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/input/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller input? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/input/_sections/slots.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller input? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 |
@example.com
10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/input/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Here are different types of inputs. 5 | 6 | 7 | 14 | 15 |
16 | 17 | 21 | 22 |
23 | 24 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/link/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | Here are predefined variants of link, each serving its own semantic purpose. 6 | 7 | 8 | 9 | Github 10 | 11 | 12 |
13 | 14 | Some sentence 15 | Inline link 16 | in-between 17 | 18 | 19 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/link/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 6 | const componentDetails = getComponentDetails('goat-link'); 7 | 8 | import UsageSection from './_sections/usage.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/menu/_sections/events.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Highlighter from '../../../../components/Highlighter.astro'; 3 | --- 4 | 5 | 6 | const $list = document.querySelector('.menu'); 7 | $list.addEventListener('goat-menu-item--click', 8 | function(evt) { 9 | console.log('
' + JSON.stringify(evt.detail.value, null, 4) + '
'); 10 | }); 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/menu/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | Cut 8 | ⌘X 9 | 10 | 11 | Copy 12 | ⌘C 13 | 14 | 15 | Paste 16 | ⌘X 17 | 18 | 19 | 20 | Bold 21 | 22 | 23 | Italic 24 | 25 | 26 | 27 | Delete 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/modal-content/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 6 | const componentDetails = getComponentDetails('goat-modal-content'); 7 | 8 | 9 | const sections = []; 10 | --- 11 | 12 | 13 | 14 | API 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/modal/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 6 | const componentDetails = getComponentDetails('goat-modal'); 7 | 8 | import UsageSection from './_sections/Usage.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | API 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/notification-manager/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 6 | const componentDetails = getComponentDetails('goat-notification-manager'); 7 | 8 | import UsageSection from './_sections/usage.astro'; 9 | 10 | const sections = [{ 11 | 'title': 'Usage', 12 | 'Component': UsageSection, 13 | }]; 14 | --- 15 | 16 | 17 | 18 | Overview 19 | Playground 20 | API 21 | 22 | 23 | 24 | 25 | 26 | Work in progress 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/notification/_sections/HighContrastSection.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | import NotificationContent from './notification-content.astro'; 4 | --- 5 | High contrast notifications are designed to be more accessible for users with visual 6 | impairments. They have a higher contrast ratio between the text and background color. 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/notification/_sections/States.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | import NotificationContent from './notification-content.astro'; 4 | --- 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/notification/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | import NotificationContent from './notification-content.astro'; 4 | --- 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/notification/_sections/notification-content.astro: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 |
A new 4 | software 5 | update is available. 6 |
7 |
8 | A new version of the software is available. Click the button to view the changelog. 9 |
10 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/number/_sections/slots.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller input? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/number/_sections/states.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Disabled 5 | Make input look inactive by adding the disabled boolean attribute to any 6 | <button> element. 7 | 8 | 9 | 10 | 11 | 12 | 13 | Read only 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/number/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Here are different types of inputs. 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/popover-content/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | const componentDetails = getComponentDetails('goat-popover-content'); 6 | --- 7 | 8 | 9 | 10 | API 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/progress/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller spinners? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/progress/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/sidenav/_sections/events.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Highlighter from '../../../../components/Highlighter.astro'; 3 | --- 4 | 5 | 6 | const $list = document.querySelector('.menu'); 7 | $list.addEventListener('goat-menu-item-click', 8 | function(evt) { 9 | console.log('
' + JSON.stringify(evt.detail.value, null, 4) + '
'); 10 | }); 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/sidenav/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | New 8 | Open 9 | Save 10 | Disabled 11 | 12 | Print (with value) 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/slider/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 17 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/slider/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 6 | const componentDetails = getComponentDetails('goat-slider'); 7 | 8 | import UsageSection from './_sections/usage.astro'; 9 | 10 | const sections = [ 11 | { 12 | 'title': 'Usage', 13 | 'Component': UsageSection, 14 | }]; 15 | --- 16 | 17 | 18 | 19 | Overview 20 | Playground 21 | API 22 | 23 | 24 | 25 | 26 | 27 | Work in progress 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/spinner/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller spinners? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/spinner/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | Loading... 7 | 8 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/spinner/_sections/variants.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/svg/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/svg/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller icons? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/svg/_sections/variants.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/table/_column-config.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "name", 4 | "label": "Name", 5 | "width": 16, 6 | "fixed": true 7 | }, 8 | { 9 | "name": "age", 10 | "label": "Age", 11 | "width": 7 12 | }, 13 | { 14 | "name": "eyeColor", 15 | "label": "Eye Color" 16 | }, 17 | { 18 | "name": "company", 19 | "label": "Company" 20 | }, 21 | { 22 | "name": "email", 23 | "label": "Email", 24 | "width": 25 25 | }, 26 | { 27 | "name": "address", 28 | "label": "Address", 29 | "width": 20 30 | } 31 | ] 32 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/table/_sections/empty.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | {% GoatHighlighter language:"javascript" %} 20 | const $emptyTable = document.getElementById('empty-table'); 21 | // Columns 22 | $emptyTable.columns = {% include_relative column-config.json %}; 23 | // Data 24 | $emptyTable.data = []; 25 | $emptyTable.emptyState = { 26 | 'headline': 'Empty list', 27 | 'description': 'There are no employees to display', 28 | 'action': 'Create Employee', 29 | 'actionUrl': '#' 30 | }; 31 | {% endGoatHighlighter %} 32 | 33 | 34 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/table/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from '../../../layouts/Component.astro'; 3 | import { getComponentDetails } from '../../../_data/getComponentDetails.ts'; 4 | import ApiPanel from '../../../components/ApiPanel.astro'; 5 | import OverviewPanel from '../../../components/OverviewPanel.astro'; 6 | const componentDetails = getComponentDetails('goat-table'); 7 | 8 | import UsageSection from './_sections/usage.astro'; 9 | 10 | const sections = [{ 11 | 'title': 'Usage', 12 | 'Component': UsageSection, 13 | }]; 14 | --- 15 | 16 | 17 | 18 | Overview 19 | API 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/tabs/_sections/Icons.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Here are several predefined button styles, each serving its own semantic purpose. 5 | 6 | 7 | 8 | 9 | First tab 10 | Second tab 11 | Disabled tab 12 | Last tab 13 | 14 | 15 | 16 | First tab content 17 | 18 | 19 | 20 | Second tab content 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | 29 | 30 | Circle 31 | Email 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/tabs/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 9 | 10 | 11 | 12 | First tab 13 | Second tab 14 | Disabled tab 15 | External link 16 | 17 | 18 | 19 | First content 20 | 21 | 22 | 23 | Second content 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/tag/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 |
7 | Gray 8 | Blue 9 | Red 10 | 14 | Green 15 | 16 | Yellow 17 |
18 | 19 |
20 | Gray 21 | Blue 22 | Red 23 | Green 24 | Yellow 25 |
26 | 27 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/text/_sections/color-variants.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | Primary 6 | Secondary 7 | Tertiary / Helper 8 | Error 9 | Inverse 10 | 11 | 16 | 17 |
18 | Primary 19 |
20 | 21 |
22 | Primary 23 |
24 | 25 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/text/_sections/fluid-heading-styles.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | The fluid heading styles are primarily used in web pages, and are therefore part of the expressive set of type styles. These headings are responsive and the type styles actually change size incrementally (almost imperceptibly) between the different breakpoints — hence the name “fluid.” 7 | 8 | 9 | 10 | 11 | This is for component and layout headings. 12 | 13 | 14 | This is for layout headings. 15 | 16 | 17 | This is for layout headings. 18 | 19 | 20 | This is for layout headings. 21 | 22 | 23 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/textarea/_sections/states.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Disabled 5 | Make input look inactive by adding the disabled boolean attribute to any 6 | <button> element. 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | Readonly 16 | Make input look inactive by adding the disabled boolean attribute to any 17 | <button> element. 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/textarea/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/time-picker/_sections/disabled.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Make input look inactive by adding the disabled boolean 6 | attribute to any 7 | <input> element. 8 | 10 | 11 | 12 | 13 | 14 | 15 | Read only 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/time-picker/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller input? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/time-picker/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Here are different types of inputs. 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/toggle/_sections/events.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Highlighter from '../../../../components/Highlighter.astro'; 3 | --- 4 | On change of toggle value a CustomEvent goat:change is 6 | triggered by the element. 7 | 9 | 10 | 11 | 12 | Change Event? 13 | 18 | 19 | 20 | 21 | document.querySelector('#change-toggle-field').addEventListener('goat:change', function(event) { 22 | console.log('Input changed to :: ' + event.target.value); 23 | }); 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/toggle/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Here are several predefined toggle sizes, each serving its own semantic purpose. 5 | 6 | 7 | 8 |
9 | Large 10 | Medium 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/toggle/_sections/states.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | Disabled 6 | Make input look inactive by adding the disabled boolean 8 | attribute to any 9 | <input> element. 10 | 11 | 12 | 13 | Disabled toggle 14 | Disabled toggle 15 | 16 | 17 | Readonly 18 | Make input look inactive by adding the disabled boolean 20 | attribute to any 21 | <input> element. 22 | 23 | 24 | 25 | Readonly toggle 26 | Readonly toggle 27 | 28 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/toggle/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | Want ice cream? 6 | 7 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/tooltip/_sections/Shared.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | The dropdown can be positioned relative to the trigger element. Possible positions are: top-start, 6 | top-end, 7 | bottom-end, bottom-start. 8 | 9 | 10 | You can also use the positions attribute to set all preferred position of the 11 | dropdown. On scroll, the dropdown will be repositioned to the 12 | closest position. 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/tooltip/_sections/Usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | import Highlighter from '../../../../components/Highlighter.astro'; 4 | --- 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 | 18 | Test 19 | 20 | 21 | Very large content. Very large content. Very large content.Very large content. Very large content. Very large content. 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/tree-view/_sections/events.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Highlighter from '../../../../components/Highlighter.astro'; 3 | --- 4 | 5 | 6 | 7 | const treeView = document.querySelector('#tree-view'); 8 | treeView.addEventListener('goat-tree-node--click', function(evt) { 9 | myConsole.log(JSON.stringify(evt.detail.value, null, 4), 'goat-tree-node-click'); 10 | }); 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/tree-view/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/url-input/_sections/sizes.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller input? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/url-input/_sections/slots.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Fancy larger or smaller input? Add size attribute for additional sizes. 5 | 6 | 7 | 8 | 9 |
@example.com
10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /astro-docs/src/pages/components/url-input/_sections/usage.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import HighlighterCard from '../../../../components/HighlighterCard.astro'; 3 | --- 4 | Here are different types of inputs. 5 | 6 | 7 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /astro-docs/src/styles/blog.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "mixin"; 3 | 4 | 5 | :root { 6 | --header-height: 3rem; 7 | } 8 | 9 | .top-nav { 10 | box-shadow: var(--shadow-sm); 11 | border-bottom: 1px solid var(--border-strong-01); 12 | } 13 | 14 | 15 | .page-container { 16 | min-height: calc(100vh - 67px - 48px); 17 | } 18 | 19 | 20 | .legal { 21 | margin-bottom: 0; 22 | padding-bottom: var(--spacing-05); 23 | } 24 | 25 | 26 | .blog-posts { 27 | 28 | .post-list { 29 | margin-top: var(--spacing-07); 30 | 31 | .item { 32 | margin-bottom: var(--spacing-07); 33 | } 34 | } 35 | 36 | } 37 | 38 | .js-scroll-nav { 39 | color: var(--text-primary); 40 | } 41 | -------------------------------------------------------------------------------- /astro-docs/src/styles/mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin for-phone-only { 2 | @media (max-width: 671px) { 3 | @content; 4 | } 5 | } 6 | 7 | @mixin for-tablet-portrait-up { 8 | @media (min-width: 672px) { 9 | @content; 10 | } 11 | } 12 | 13 | @mixin for-tablet-landscape-up { 14 | @media (min-width: 1056px) { 15 | @content; 16 | } 17 | } 18 | 19 | @mixin for-desktop-up { 20 | @media (min-width: 1312px) { 21 | @content; 22 | } 23 | } 24 | 25 | @mixin for-big-desktop-up { 26 | @media (min-width: 1584px) { 27 | @content; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /astro-docs/src/styles/post.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import "mixin"; 3 | 4 | 5 | :root { 6 | --header-height: 3rem; 7 | } 8 | 9 | .top-nav { 10 | box-shadow: var(--shadow-sm); 11 | border-bottom: 1px solid var(--border-strong-01); 12 | } 13 | 14 | .page-container { 15 | min-height: calc(100vh - 67px - 48px); 16 | } 17 | 18 | .legal { 19 | margin-bottom: 0; 20 | padding-bottom: var(--spacing-05); 21 | } 22 | 23 | 24 | .js-scroll-nav { 25 | color: var(--text-primary); 26 | } 27 | -------------------------------------------------------------------------------- /astro-docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict" 3 | } 4 | -------------------------------------------------------------------------------- /bin/clean-branches.sh: -------------------------------------------------------------------------------- 1 | git fetch --all 2 | git branch -vv | grep ': gone]'| grep -v "\*" | awk '{ print $1; }' | xargs git branch -d 3 | -------------------------------------------------------------------------------- /env.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const arguments = process.argv; 3 | 4 | // Create a new file called .env 5 | fs.writeFileSync('.env', ''); 6 | 7 | if (arguments[2] === 'LOCAL') { 8 | fs.appendFileSync('.env', 'THIRD_PARTY_ASSETS=LOCAL\n'); 9 | } else { 10 | fs.appendFileSync('.env', 'THIRD_PARTY_ASSETS=REMOTE\n'); 11 | } 12 | -------------------------------------------------------------------------------- /qodana.yaml: -------------------------------------------------------------------------------- 1 | #-------------------------------------------------------------------------------# 2 | # Qodana analysis is configured by qodana.yaml file # 3 | # https://www.jetbrains.com/help/qodana/qodana-yaml.html # 4 | #-------------------------------------------------------------------------------# 5 | version: "1.0" 6 | 7 | #Specify inspection profile for code analysis 8 | profile: 9 | name: qodana.starter 10 | 11 | #Enable inspections 12 | #include: 13 | # - name: 14 | 15 | #Disable inspections 16 | #exclude: 17 | # - name: 18 | # paths: 19 | # - 20 | 21 | #The following options are only applied in CI/CD environment 22 | #These options are ignored during local run 23 | 24 | #Execute shell command before Qodana execution 25 | #bootstrap: sh ./prepare-qodana.sh 26 | 27 | #Install IDE plugins before Qodana execution 28 | #plugins: 29 | # - id: #(plugin id can be found at https://plugins.jetbrains.com) 30 | 31 | #Specify Qodana linter for analysis 32 | linter: jetbrains/qodana-js:latest 33 | -------------------------------------------------------------------------------- /research/Screenshot 2022-08-03 084633.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goatui/components/f86abc561b32772ce90aff5bdbaa8a39883f7790/research/Screenshot 2022-08-03 084633.png -------------------------------------------------------------------------------- /research/loader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS Bin 7 | 8 | 9 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /research/quote.svg: -------------------------------------------------------------------------------- 1 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | Disallow: /no-search/ 4 | Disallow: /components/*/sections/*.html 5 | Sitemap: https://goatui.com/sitemap.xml 6 | -------------------------------------------------------------------------------- /src/3d-party/d3js/index.tsx: -------------------------------------------------------------------------------- 1 | import { loadScript, waitUntil } from '../../utils/utils'; 2 | import { getAssetPath } from '@stencil/core'; 3 | 4 | let loadD3Called = false; 5 | 6 | export async function loadD3JS() { 7 | if (loadD3Called) { 8 | await waitUntil(() => !!window['d3']); 9 | return; 10 | } 11 | 12 | loadD3Called = true; 13 | 14 | if (process.env.THIRD_PARTY_ASSETS == 'LOCAL') 15 | await loadScript(getAssetPath('./assets/node_modules/d3/dist/d3.min.js')); 16 | else await loadScript('https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js'); 17 | 18 | await waitUntil(() => !!window['d3']); 19 | } 20 | -------------------------------------------------------------------------------- /src/3d-party/prism/prism-line-numbers.scss: -------------------------------------------------------------------------------- 1 | pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right} 2 | -------------------------------------------------------------------------------- /src/assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@carbon/icons": "11.41.0", 4 | "d3": "7.9.0", 5 | "monaco-editor": "0.48.0", 6 | "prismjs": "1.29.0" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/assets/styles/theme.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../globalStyles/theme/theme.scss","../../globalStyles/mixins.scss"],"names":[],"mappings":"AAGA,MACE,eAEE,k1xBAIJ,KACE,0BAGF,ECHI,yFACA,yCACA,4CACA,+CACA,gDDGJ,MACE,uCACA,yBACA,WAGF,kBACE,sBACA,YAGF,yBACE,yBAGF,eACE,sBAGF,SACE,iBACA,oBACA,gBACA,yBACA,WAGF,kBACE,6BAGF,UACE,2BAGF,UACE,2BAIF,mBAEI,k1xBAIJ,iBAEI,oiGAIJ,iBAEI,q4FAIJ,kBAEI","file":"theme.css"} -------------------------------------------------------------------------------- /src/components/accordion/accordion/accordion.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | slot::slotted(goat-accordion-item) { 8 | border-top: 1px solid var(--border-subtle); 9 | } 10 | 11 | slot::slotted(goat-accordion-item:last-child) { 12 | border-bottom: 1px solid var(--border-subtle); 13 | } 14 | -------------------------------------------------------------------------------- /src/components/accordion/accordion/readme.md: -------------------------------------------------------------------------------- 1 | # goat-avatar 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ---------- | ---------- | ---------------------------------- | ---------------------- | ------- | 12 | | `align` | `align` | Accordion item dropdown alignment. | `"end" \| "start"` | `'end'` | 13 | | `multiple` | `multiple` | | `boolean` | `false` | 14 | | `size` | `size` | The According size. | `"lg" \| "md" \| "sm"` | `'md'` | 15 | 16 | 17 | ---------------------------------------------- 18 | 19 | *Built with love!* 20 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/CalendarEvent.tsx: -------------------------------------------------------------------------------- 1 | import { BaseEvent } from './event-management/BaseEvent'; 2 | 3 | export class CalendarEvent extends BaseEvent { 4 | data: any; 5 | title: string; 6 | color?: string; 7 | constructor(start: Date, end: Date, title: string, color: string, data: any) { 8 | super(start, end); 9 | this.data = data; 10 | if (color) this.color = color; 11 | this.title = title; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/column-view/column-view-background/column-view-background.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | 8 | .background { 9 | .row { 10 | display: flex; 11 | height: 2rem; 12 | border-bottom: 1px dashed var(--scale-color); 13 | 14 | &.hour { 15 | border-bottom: 1px solid var(--scale-color); 16 | } 17 | 18 | &:last-child { 19 | border-bottom: 0; 20 | } 21 | 22 | .column { 23 | flex: 1; 24 | border-right: 1px solid var(--scale-color); 25 | } 26 | } 27 | } 28 | 29 | .column { 30 | &.today { 31 | background: var(--field-01); 32 | 33 | .column-header { 34 | border-top-color: v(--color-secondary); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/column-view/column-view-background/readme.md: -------------------------------------------------------------------------------- 1 | # goat-calendar-column-view-background 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------- | ------------ | ----------- | ------ | ----------- | 12 | | `currentTime` | -- | | `Date` | `undefined` | 13 | | `dateRange` | `date-range` | | `any` | `undefined` | 14 | 15 | 16 | ## Dependencies 17 | 18 | ### Used by 19 | 20 | - [goat-calendar-column-view](..) 21 | 22 | ### Graph 23 | ```mermaid 24 | graph TD; 25 | goat-calendar-column-view --> goat-calendar-column-view-background 26 | style goat-calendar-column-view-background fill:#f9f,stroke:#333,stroke-width:4px 27 | ``` 28 | 29 | ---------------------------------------------- 30 | 31 | *Built with love!* 32 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/column-view/utils.tsx: -------------------------------------------------------------------------------- 1 | import { calculateWeekRange } from '../utils'; 2 | import { addDays, endOfDay, startOfDay } from 'date-fns'; 3 | 4 | export function calculateDateRange(view, contextDate, days) { 5 | if (view === 'week') { 6 | return calculateWeekRange(contextDate, 1 /* monday */); 7 | } else { 8 | const dateRange: any = {}; 9 | dateRange.startDate = startOfDay(contextDate); 10 | dateRange.endDate = endOfDay(addDays(contextDate, days - 1)); 11 | dateRange.totalDays = days; 12 | return dateRange; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/event-management/EventManager.tsx: -------------------------------------------------------------------------------- 1 | import {BaseEvent} from './BaseEvent'; 2 | 3 | export class EventManager { 4 | events: BaseEvent[]; 5 | 6 | constructor(events: BaseEvent[]) { 7 | this.events = events; 8 | } 9 | 10 | getEventsOverlappingWithDate(date: Date) { 11 | return this.events.filter(event => event.isOverlappingWithDate(date)); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/month-view/month-view-background/month-view-background.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | .background { 8 | .row { 9 | display: flex; 10 | height: 2rem; 11 | border-bottom: 1px dashed var(--scale-color); 12 | 13 | &.hour { 14 | border-bottom: 1px solid var(--scale-color); 15 | } 16 | 17 | &:last-child { 18 | border-bottom: 0; 19 | } 20 | 21 | .column { 22 | flex: 1; 23 | border-right: 1px solid var(--scale-color); 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/month-view/month-view-background/readme.md: -------------------------------------------------------------------------------- 1 | # goat-calendar-column-view-background 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | --------- | --------- | ----------- | -------- | ------- | 12 | | `columns` | `columns` | | `number` | `1` | 13 | 14 | 15 | ---------------------------------------------- 16 | 17 | *Built with love!* 18 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/month-view/utils.tsx: -------------------------------------------------------------------------------- 1 | import { calculateWeekRange } from '../utils'; 2 | import { addDays, endOfDay, startOfDay } from 'date-fns'; 3 | 4 | export function calculateDateRange(view, contextDate, days) { 5 | if (view === 'week') { 6 | return calculateWeekRange(contextDate, 1 /* monday */); 7 | } else { 8 | const dateRange: any = {}; 9 | dateRange.startDate = startOfDay(contextDate); 10 | dateRange.endDate = endOfDay(addDays(contextDate, days - 1)); 11 | dateRange.totalDays = days; 12 | return dateRange; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/types.tsx: -------------------------------------------------------------------------------- 1 | type CalendarViewType = { 2 | label: string; 3 | value: string; 4 | type: string; 5 | days?: number; 6 | }; 7 | type EventType = { 8 | start: Date; 9 | end: Date; 10 | title: string; 11 | color?: string; 12 | [key: string]: any; 13 | }; 14 | 15 | export type { CalendarViewType, EventType }; 16 | -------------------------------------------------------------------------------- /src/components/application/calendar/calendar/utils.tsx: -------------------------------------------------------------------------------- 1 | import { endOfMonth, endOfWeek, startOfMonth, startOfWeek } from 'date-fns/esm'; 2 | 3 | /** 4 | * Calculates start and end dates of month in a calendar. 5 | * @param date Context date for which range need to calculated. 6 | * @param weekStartsOn A numeric value. The index of the first day of the week (0 - Sunday) 7 | */ 8 | export function calculateMonthRange( 9 | date, 10 | weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1, 11 | ) { 12 | const startDate = startOfWeek(startOfMonth(date), { weekStartsOn }); 13 | const endDate = endOfWeek(endOfMonth(date), { weekStartsOn }); 14 | return { 15 | startDate, 16 | endDate, 17 | totalDays: 42, 18 | }; 19 | } 20 | 21 | /* 22 | * 23 | */ 24 | export function calculateWeekRange( 25 | date, 26 | weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6 = 1, 27 | ) { 28 | const startDate = startOfWeek(date, { weekStartsOn }); 29 | const endDate = endOfWeek(date, { weekStartsOn }); 30 | return { 31 | startDate, 32 | endDate, 33 | totalDays: 7, 34 | }; 35 | } 36 | 37 | export const LONG_EVENT_PADDING = 0.25; 38 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/cb-compound-expression/cb-compound-expression.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | 4 | .compound-expression { 5 | display: flex; 6 | padding-top: 1rem; 7 | 8 | .field-name-container { 9 | display: flex; 10 | flex-direction: column; 11 | padding-top: .5rem; 12 | padding-right: 1rem; 13 | 14 | .field-compound-type { 15 | flex: 1; 16 | padding-bottom: 1.25rem; 17 | } 18 | } 19 | 20 | .conditions { 21 | .condition-builder__condition { 22 | display: flex; 23 | gap: .5rem; 24 | align-items: center; 25 | padding-bottom: 1rem; 26 | &:last-child { 27 | padding-bottom: 0; 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/cb-compound-expression/readme.md: -------------------------------------------------------------------------------- 1 | # goat-icon 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------------- | -------------------- | ----------- | --------------- | ----------- | 12 | | `conditionOperator` | `condition-operator` | | `"and" \| "or"` | `undefined` | 13 | | `fieldLabel` | `field-label` | | `string` | `''` | 14 | | `fieldName` | `field-name` | | `string` | `''` | 15 | 16 | 17 | ## Dependencies 18 | 19 | ### Depends on 20 | 21 | - [goat-text](../../../typography/text) 22 | - [goat-cb-divider](../cb-divider) 23 | - [goat-tag](../../../tag) 24 | 25 | ### Graph 26 | ```mermaid 27 | graph TD; 28 | goat-cb-compound-expression --> goat-text 29 | goat-cb-compound-expression --> goat-cb-divider 30 | goat-cb-compound-expression --> goat-tag 31 | goat-tag --> goat-icon 32 | style goat-cb-compound-expression fill:#f9f,stroke:#333,stroke-width:4px 33 | ``` 34 | 35 | ---------------------------------------------- 36 | 37 | *Built with love!* 38 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/cb-divider/cb-divider.tsx: -------------------------------------------------------------------------------- 1 | import {Component, h, Host, Prop} from '@stencil/core'; 2 | 3 | 4 | @Component({ 5 | tag: 'goat-cb-divider', 6 | styleUrl: 'cb-divider.scss', 7 | shadow: true, 8 | }) 9 | export class CbDivider { 10 | 11 | @Prop() vertical: boolean = false; 12 | 13 | @Prop() connectStart: boolean = false; 14 | 15 | @Prop() connectEnd: boolean = false; 16 | 17 | render() { 18 | return ( 19 | 20 |
26 |
27 |
28 | 29 |
30 |
31 |
32 | 33 | ); 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/cb-divider/readme.md: -------------------------------------------------------------------------------- 1 | # goat-icon 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------------- | --------------- | ----------- | --------- | ------- | 12 | | `connectEnd` | `connect-end` | | `boolean` | `false` | 13 | | `connectStart` | `connect-start` | | `boolean` | `false` | 14 | | `vertical` | `vertical` | | `boolean` | `false` | 15 | 16 | 17 | ## Dependencies 18 | 19 | ### Used by 20 | 21 | - [goat-cb-compound-expression](../cb-compound-expression) 22 | - [goat-cb-predicate](../cb-predicate) 23 | - [goat-condition-builder](../condition-builder) 24 | 25 | ### Graph 26 | ```mermaid 27 | graph TD; 28 | goat-cb-compound-expression --> goat-cb-divider 29 | goat-cb-predicate --> goat-cb-divider 30 | goat-condition-builder --> goat-cb-divider 31 | style goat-cb-divider fill:#f9f,stroke:#333,stroke-width:4px 32 | ``` 33 | 34 | ---------------------------------------------- 35 | 36 | *Built with love!* 37 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/cb-expression/cb-expression.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | 4 | .expression { 5 | display: flex; 6 | gap: .5rem; 7 | align-items: center; 8 | padding-bottom: 1rem; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/cb-expression/cb-expression.tsx: -------------------------------------------------------------------------------- 1 | import {Component, h, Host, Prop} from '@stencil/core'; 2 | 3 | 4 | @Component({ 5 | tag: 'goat-cb-expression', 6 | styleUrl: 'cb-expression.scss', 7 | shadow: true, 8 | }) 9 | export class CbExpression { 10 | 11 | 12 | @Prop() operators: any[] = []; 13 | 14 | @Prop() operatorValue: string = ''; 15 | 16 | 17 | render() { 18 | return ( 19 | 20 | 21 |
22 | 26 | 27 | 28 |
29 | 30 | ); 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/cb-predicate/cb-predicate.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | 4 | .predicate:not(.vertical) { 5 | 6 | .predicate-body { 7 | padding-top: 1rem; 8 | } 9 | 10 | .predicate-condition-operator { 11 | padding: 1rem 2rem 0 2rem; 12 | } 13 | } 14 | 15 | 16 | .predicate.vertical { 17 | display: flex; 18 | align-items: stretch; 19 | 20 | .predicate-condition-operator { 21 | padding: 2rem 0 1rem 0; 22 | padding-inline-end: v(--spacing-05); 23 | } 24 | 25 | .predicate-body { 26 | flex: 1; 27 | } 28 | } 29 | 30 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/cb-predicate/readme.md: -------------------------------------------------------------------------------- 1 | # goat-icon 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------------- | -------------------- | ----------- | --------------- | ----------- | 12 | | `conditionOperator` | `condition-operator` | | `"and" \| "or"` | `undefined` | 13 | | `vertical` | `vertical` | | `boolean` | `false` | 14 | 15 | 16 | ## Dependencies 17 | 18 | ### Depends on 19 | 20 | - [goat-cb-divider](../cb-divider) 21 | - [goat-tag](../../../tag) 22 | 23 | ### Graph 24 | ```mermaid 25 | graph TD; 26 | goat-cb-predicate --> goat-cb-divider 27 | goat-cb-predicate --> goat-tag 28 | goat-tag --> goat-icon 29 | style goat-cb-predicate fill:#f9f,stroke:#333,stroke-width:4px 30 | ``` 31 | 32 | ---------------------------------------------- 33 | 34 | *Built with love!* 35 | -------------------------------------------------------------------------------- /src/components/application/condition-builder/condition-builder/condition-builder.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | 4 | :host { 5 | display: block; 6 | --compound-type-line-color: #{v(--color-primary)}; 7 | } 8 | 9 | .condition-builder { 10 | 11 | .condition-builder__predicates { 12 | display: flex; 13 | flex-direction: column; 14 | gap: 1rem; 15 | padding-bottom: 1rem; 16 | .predicate-divider { 17 | padding: 0 2rem; 18 | } 19 | } 20 | 21 | 22 | 23 | 24 | 25 | 26 | } 27 | 28 | -------------------------------------------------------------------------------- /src/components/application/current-time/current-time.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/application/current-time/current-time.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { CurrentTime } from './current-time'; 3 | 4 | describe('current-time', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [CurrentTime], 8 | html: '', 9 | }); 10 | const time = new Date().toLocaleTimeString('en-US'); 11 | expect(page.root).toEqualHtml(` 12 | 13 | 14 |
15 | ${time} 16 |
17 | 18 | 19 | `); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/components/application/current-time/readme.md: -------------------------------------------------------------------------------- 1 | # goat-current-time 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ---------- | ---------- | ----------- | -------- | ----------- | 12 | | `timezone` | `timezone` | | `string` | `undefined` | 13 | 14 | 15 | ---------------------------------------------- 16 | 17 | *Built with love!* 18 | -------------------------------------------------------------------------------- /src/components/application/flow-designer/canvas/canvas.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | .canvas-wrapper { 8 | background: var(--layer-hover-01); 9 | } 10 | 11 | #canvas-background circle { 12 | fill: var(--border-disabled); 13 | } 14 | 15 | #endarrow polyline{ 16 | fill: none; 17 | stroke: #231F20; 18 | vector-effect: non-scaling-stroke; 19 | stroke-width: 2; 20 | } 21 | 22 | 23 | .line { 24 | 25 | &.no-color { 26 | stroke: var(--border-strong-01); 27 | } 28 | } 29 | 30 | 31 | .clickable { 32 | cursor: pointer; 33 | 34 | &:hover .line { 35 | 36 | stroke: v(--color-primary); 37 | } 38 | 39 | z-index: 1; 40 | } 41 | -------------------------------------------------------------------------------- /src/components/application/flow-designer/canvas/readme.md: -------------------------------------------------------------------------------- 1 | # goat-flow-designer 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | --------- | --------- | ----------- | -------- | ----------- | 12 | | `padding` | `padding` | | `number` | `1` | 13 | | `shapes` | -- | | `any[]` | `[]` | 14 | | `viewbox` | `viewbox` | | `string` | `undefined` | 15 | | `zoom` | `zoom` | | `number` | `1` | 16 | 17 | 18 | ## Dependencies 19 | 20 | ### Used by 21 | 22 | - [goat-flow-designer](../flow-designer) 23 | 24 | ### Graph 25 | ```mermaid 26 | graph TD; 27 | goat-flow-designer --> goat-canvas 28 | style goat-canvas fill:#f9f,stroke:#333,stroke-width:4px 29 | ``` 30 | 31 | ---------------------------------------------- 32 | 33 | *Built with love!* 34 | -------------------------------------------------------------------------------- /src/components/application/footer/footer-copyright/footer-copyright.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | .legal { 4 | margin-bottom: 0; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/application/footer/footer-copyright/footer-copyright.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h, Host, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'goat-footer-copyright', 5 | styleUrl: 'footer-copyright.scss', 6 | shadow: true, 7 | }) 8 | export class FooterCopyright { 9 | @Element() elm!: HTMLElement; 10 | 11 | @Prop() copyright: string; 12 | 13 | @Prop() copyrightHref: string; 14 | 15 | @Prop() year = new Date().getFullYear(); 16 | 17 | render() { 18 | return ( 19 | 20 | 21 | © {this.year}  22 | {this.copyright}. All Rights Reserved. 23 | 24 | 25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/application/footer/footer-copyright/readme.md: -------------------------------------------------------------------------------- 1 | # p4-top-navigation 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | --------------- | ---------------- | ----------- | -------- | -------------------------- | 12 | | `copyright` | `copyright` | | `string` | `undefined` | 13 | | `copyrightHref` | `copyright-href` | | `string` | `undefined` | 14 | | `year` | `year` | | `number` | `new Date().getFullYear()` | 15 | 16 | 17 | ## Dependencies 18 | 19 | ### Depends on 20 | 21 | - [goat-text](../../../typography/text) 22 | - [goat-link](../../../link) 23 | 24 | ### Graph 25 | ```mermaid 26 | graph TD; 27 | goat-footer-copyright --> goat-text 28 | goat-footer-copyright --> goat-link 29 | style goat-footer-copyright fill:#f9f,stroke:#333,stroke-width:4px 30 | ``` 31 | 32 | ---------------------------------------------- 33 | 34 | *Built with love!* 35 | -------------------------------------------------------------------------------- /src/components/application/footer/footer-links/footer-links.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | .nav-links { 4 | list-style: none; 5 | display: flex; 6 | gap: 1.5rem; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/application/footer/footer-links/footer-links.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Element, h, Host, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'goat-footer-links', 5 | styleUrl: 'footer-links.scss', 6 | shadow: true, 7 | }) 8 | export class FooterLinks { 9 | @Element() elm!: HTMLElement; 10 | 11 | @Prop() links: { name: string; href: string }[] = []; 12 | 13 | getLinks() { 14 | if (typeof this.links == 'string') return JSON.parse(this.links); 15 | return this.links; 16 | } 17 | 18 | render() { 19 | return ( 20 | 21 |
    22 | {this.getLinks().map(link => { 23 | return ( 24 |
  • 25 | 26 | {link.name} 27 | 28 |
    • 29 | ); 30 | })} 31 |
32 | 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/application/footer/footer-links/readme.md: -------------------------------------------------------------------------------- 1 | # p4-top-navigation 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------- | --------- | ----------- | ----------------------------------- | ------- | 12 | | `links` | -- | | `{ name: string; href: string; }[]` | `[]` | 13 | 14 | 15 | ## Dependencies 16 | 17 | ### Depends on 18 | 19 | - [goat-link](../../../link) 20 | 21 | ### Graph 22 | ```mermaid 23 | graph TD; 24 | goat-footer-links --> goat-link 25 | style goat-footer-links fill:#f9f,stroke:#333,stroke-width:4px 26 | ``` 27 | 28 | ---------------------------------------------- 29 | 30 | *Built with love!* 31 | -------------------------------------------------------------------------------- /src/components/application/footer/footer/footer.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | $footer-height: var(--footer-height, 1.75rem); 4 | $header-background-dark: var(--header-background-dark, var(--header-background)); 5 | :host { 6 | display: block; 7 | } 8 | 9 | .footer-container { 10 | container: footer-variant-simple / inline-size; 11 | } 12 | 13 | .footer.variant-simple { 14 | display: flex; 15 | background: var(--layer); 16 | 17 | align-items: center; 18 | min-height: $footer-height; 19 | 20 | gap: 1rem; 21 | 22 | .start { 23 | display: flex; 24 | align-items: center; 25 | } 26 | 27 | } 28 | 29 | @container footer-variant-simple (min-width: 768px) { 30 | .footer-container { 31 | .variant-simple { 32 | flex-direction: row; 33 | padding: var(--spacing-05) var(--spacing-07); 34 | 35 | .start { 36 | flex: 1; 37 | } 38 | } 39 | } 40 | } 41 | 42 | @container footer-variant-simple (max-width: 767px) { 43 | .footer-container { 44 | .variant-simple { 45 | flex-direction: column; 46 | padding: var(--spacing-05) var(--spacing-05); 47 | 48 | .slot-container { 49 | width: 100%; 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/components/application/footer/footer/readme.md: -------------------------------------------------------------------------------- 1 | # p4-top-navigation 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | --------- | --------- | ----------- | ---------- | -------------------------- | 12 | | `variant` | `variant` | | `"simple"` | `'simple'` | 13 | | `year` | `year` | | `number` | `new Date().getFullYear()` | 14 | 15 | 16 | ---------------------------------------------- 17 | 18 | *Built with love!* 19 | -------------------------------------------------------------------------------- /src/components/application/header/header-action/header-action.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | height: var(--goat-header-height) 6 | } 7 | 8 | .header-action { 9 | --goat-button-padding: .75rem; 10 | margin-inline-end: .5rem; 11 | --goat-button-height: 100%; 12 | --goat-button-border-radius: 0; 13 | } 14 | 15 | :host-context(goat-header[float]) { 16 | height: calc(var(--goat-header-height) - 2px); 17 | } 18 | 19 | :host-context(:not(goat-header[float])) .header-action { 20 | margin-inline-end: 0; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/application/sidenav-menu/sidenav-menu.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | --list-border-radius: var(--border-radius); 6 | --goat-menu-max-height: inherit; 7 | } 8 | 9 | 10 | .menu { 11 | background-color: var(--field-02); 12 | padding: var(--spacing-02) 0; 13 | border: 1px solid v(--color-neutral-200); 14 | box-sizing: border-box; 15 | border-radius: var(--list-border-radius); 16 | box-shadow: var(--shadow-sm); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/application/sidenav/readme.md: -------------------------------------------------------------------------------- 1 | # goat-menu 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------ | ------------- | ----------- | --------- | ------- | 12 | | `showLoader` | `show-loader` | | `boolean` | `false` | 13 | 14 | 15 | ---------------------------------------------- 16 | 17 | *Built with love!* 18 | -------------------------------------------------------------------------------- /src/components/application/sidenav/sidenav.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | 8 | .sidenav { 9 | width: 16rem; 10 | background: var(--background); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/application/sidenav/sidenav.tsx: -------------------------------------------------------------------------------- 1 | import { Component, ComponentInterface, Element, h, Prop } from '@stencil/core'; 2 | 3 | /** 4 | * @name1 Side Navigation 5 | * @description1 The side navigation component provides an easy way to navigate through your website / application. 6 | * @img1 /assets/img/sidenav.webp 7 | */ 8 | @Component({ 9 | tag: 'goat-sidenav', 10 | styleUrl: 'sidenav.scss', 11 | shadow: true, 12 | }) 13 | export class Sidenav implements ComponentInterface { 14 | @Element() elm!: HTMLElement; 15 | 16 | @Prop() showLoader: boolean = false; 17 | 18 | componentWillLoad() {} 19 | 20 | render() { 21 | return ( 22 |
23 | 24 |
25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/avatar/avatar.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | pointer-events: none; 6 | } 7 | 8 | .avatar-container { 9 | display: flex; 10 | align-items: center; 11 | gap: v(--spacing-02); 12 | line-height: 0; 13 | } 14 | 15 | .avatar { 16 | border-radius: 50%; 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | overflow: hidden; 21 | color: v(--field-01); 22 | 23 | .image { 24 | width: 100%; 25 | height: 100%; 26 | } 27 | 28 | @include font-style(text-md); 29 | } 30 | 31 | :host(.square) { 32 | .avatar { 33 | border-radius: 10px; 34 | } 35 | } 36 | 37 | .avatar.avatar-initials { 38 | background: var(--avatar-bg-color, v(--color-brand-primary)); 39 | } 40 | 41 | .avatar.avatar-image { 42 | background: v(--color-brand-primary-30); 43 | } 44 | 45 | :host(.inverted) { 46 | .avatar { 47 | color: v(--color-brand-primary); 48 | } 49 | 50 | .avatar.avatar-initials { 51 | background: var(--avatar-bg-color, v(--color-white)); 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /src/components/avatar/readme.md: -------------------------------------------------------------------------------- 1 | # goat-avatar 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------- | --------- | ------------ | -------- | -------- | 12 | | `name` | `name` | | `string` | `''` | 13 | | `size` | `size` | Avatar size. | `string` | `'2rem'` | 14 | | `src` | `src` | | `string` | `''` | 15 | 16 | 17 | ---------------------------------------------- 18 | 19 | *Built with love!* 20 | -------------------------------------------------------------------------------- /src/components/badge/badge.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | } 6 | 7 | .badge { 8 | position: relative; 9 | } 10 | 11 | .badge-content { 12 | position: absolute; 13 | z-index: v(--z-index-badge); 14 | color: v(--color-white); 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | background-color: var(--badge-color, v(--color-neutral)); 19 | border-radius: 12px; 20 | padding: v(--spacing-01) var(--spacing-02); 21 | @include font-style(code-01); 22 | 23 | &.has-content { 24 | top: var(--badge-top, -0.5rem); 25 | right: var(--badge-left, -0.5rem); 26 | height: 1.25rem; 27 | min-width: 1.25rem; 28 | } 29 | 30 | &:not(.has-content) { 31 | top: var(--badge-top, -0.25rem); 32 | right: var(--badge-left, -0.25rem); 33 | height: 0.5rem; 34 | min-width: 0.5rem; 35 | } 36 | } 37 | 38 | 39 | @each $state in [success, warning, error] { 40 | .badge.color-#{$state} { 41 | .badge-content { 42 | background-color: var(--support-#{$state}); 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/badge/badge.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, Host, Prop } from '@stencil/core'; 2 | 3 | /** 4 | * @name Badge 5 | * @description The badge component is used to display a small amount of information to the user. 6 | * @category Informational 7 | * @tag content 8 | * @example 9 | */ 10 | @Component({ 11 | tag: 'goat-badge', 12 | styleUrl: 'badge.scss', 13 | shadow: true, 14 | }) 15 | export class Badge { 16 | @Prop() content: string; 17 | 18 | @Prop({ reflect: true }) color: 19 | | 'primary' 20 | | 'secondary' 21 | | 'success' 22 | | 'error' 23 | | 'warning' = 'error'; 24 | 25 | render() { 26 | return ( 27 | 28 |
29 |
35 | {this.content} 36 |
37 | 38 |
39 | 40 | ); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/badge/readme.md: -------------------------------------------------------------------------------- 1 | # goat-icon 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | --------- | --------- | ----------- | --------------------------------------------------------------- | ----------- | 12 | | `color` | `color` | | `"error" \| "primary" \| "secondary" \| "success" \| "warning"` | `'error'` | 13 | | `content` | `content` | | `string` | `undefined` | 14 | 15 | 16 | ---------------------------------------------- 17 | 18 | *Built with love!* 19 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb-item/breadcrumb-item.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | margin-bottom: v(--spacing-02); 6 | } 7 | 8 | .breadcrumb { 9 | display: flex; 10 | align-items: center; 11 | } 12 | 13 | slot::slotted(*) { 14 | &::before { 15 | display: inline-block; 16 | padding-right: v(--spacing-03); 17 | padding-left: v(--spacing-03); 18 | color: v(--border-strong-01); 19 | content: "/"; 20 | } 21 | } 22 | 23 | slot::slotted(*:first-child) { 24 | &::before { 25 | display: none; 26 | } 27 | } 28 | 29 | -------------------------------------------------------------------------------- /src/components/breadcrumb/breadcrumb.tsx: -------------------------------------------------------------------------------- 1 | import { Component, ComponentInterface, Element, h, Host } from '@stencil/core'; 2 | 3 | /** 4 | * @name Breadcrumb 5 | * @description A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application. 6 | * @category Navigation 7 | * @tags navigation 8 | * @example HomePage 9 | */ 10 | @Component({ 11 | tag: 'goat-breadcrumb', 12 | styleUrl: 'breadcrumb.scss', 13 | shadow: true, 14 | }) 15 | export class Breadcrumb implements ComponentInterface { 16 | @Element() elm!: HTMLElement; 17 | 18 | componentWillLoad() { 19 | this.elm.querySelectorAll('goat-breadcrumb-item').forEach((item, i) => { 20 | item.position = i + 1 + ''; 21 | }); 22 | } 23 | 24 | render() { 25 | return ( 26 | 27 |
28 | 29 |
30 | 31 | ); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/components/breadcrumb/readme.md: -------------------------------------------------------------------------------- 1 | # goat-heading 2 | 3 | 4 | 5 | 6 | 7 | 8 | ---------------------------------------------- 9 | 10 | *Built with love!* 11 | -------------------------------------------------------------------------------- /src/components/button/button-group/button-group.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | $border-width: 0.0625rem; 4 | 5 | :host .button-group { 6 | display: flex; 7 | 8 | slot::slotted(goat-button) { 9 | display: block; 10 | margin: 0; 11 | --goat-button-border-width: #{$border-width} 0 #{$border-width} #{$border-width}; 12 | --goat-button-border-radius: 0; 13 | } 14 | 15 | slot::slotted(goat-button:first-child) { 16 | --goat-button-border-radius: #{v(--border-radius)} 0 0 #{v(--border-radius)}; 17 | } 18 | 19 | slot::slotted(goat-button:last-child) { 20 | --goat-button-border-width: #{$border-width}; 21 | --goat-button-border-radius: 0 #{v(--border-radius)} #{v(--border-radius)} 0; 22 | } 23 | 24 | slot::slotted(goat-button:only-child) { 25 | --goat-button-border-radius: #{v(--border-radius)}; 26 | --goat-button-border-width: #{$border-width}; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/button/button-group/button-group.tsx: -------------------------------------------------------------------------------- 1 | import { Component, ComponentInterface, h, Host } from '@stencil/core'; 2 | 3 | /** 4 | * @name Button Group 5 | * @description Group a series of buttons together on a single line with the button group, and super-power. 6 | * @category General 7 | * @tags controls 8 | * @example 9 | * 10 | * 11 | * 12 | */ 13 | @Component({ 14 | tag: 'goat-button-group', 15 | styleUrl: 'button-group.scss', 16 | shadow: true, 17 | }) 18 | export class ButtonGroup implements ComponentInterface { 19 | 20 | 21 | render() { 22 | return ( 23 |
24 | 25 |
26 | ); 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /src/components/button/button-group/readme.md: -------------------------------------------------------------------------------- 1 | # goat-button-group 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Dependencies 9 | 10 | ### Used by 11 | 12 | - [goat-flow-designer](../../application/flow-designer/flow-designer) 13 | 14 | ### Graph 15 | ```mermaid 16 | graph TD; 17 | goat-flow-designer --> goat-button-group 18 | style goat-button-group fill:#f9f,stroke:#333,stroke-width:4px 19 | ``` 20 | 21 | ---------------------------------------------- 22 | 23 | *Built with love!* 24 | -------------------------------------------------------------------------------- /src/components/button/button/button.spec.tsx: -------------------------------------------------------------------------------- 1 | import { newSpecPage } from '@stencil/core/testing'; 2 | import { Button } from './button'; 3 | 4 | describe('button', () => { 5 | it('renders', async () => { 6 | const page = await newSpecPage({ 7 | components: [Button], 8 | html: '', 9 | }); 10 | expect(page.root).toEqualHtml(` 11 | 12 | 13 |
14 |
15 | 20 |
21 | 22 | 23 | `); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/components/card/card.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | padding-bottom: v(--spacing-03); 6 | } 7 | 8 | .card { 9 | display: flex; 10 | flex-direction: column; 11 | border: 1px solid v(--border-subtle); 12 | border-radius: v(--border-radius); 13 | height: 100%; 14 | background-color: v(--background); 15 | } 16 | 17 | :host([shadow-level="xxl"]) .card { 18 | box-shadow: v(--shadow-xl); 19 | } 20 | 21 | :host([shadow-level="xl"]) .card { 22 | box-shadow: v(--shadow-xl); 23 | } 24 | 25 | :host([shadow-level="lg"]) .card { 26 | box-shadow: v(--shadow-xl); 27 | } 28 | 29 | :host([shadow-level="md"]) .card { 30 | box-shadow: v(--shadow-xl); 31 | } 32 | 33 | :host([shadow-level="sm"]) .card { 34 | box-shadow: v(--shadow-xl); 35 | } 36 | 37 | 38 | :host([shadow-level="xs"]) .card { 39 | box-shadow: v(--shadow-xl); 40 | } 41 | 42 | slot::slotted(goat-card-content) { 43 | display: block; 44 | padding: 1rem; 45 | border-bottom: 1px solid v(--border-subtle); 46 | } 47 | 48 | slot::slotted(goat-card-content.no-padding) { 49 | padding: 0; 50 | } 51 | 52 | slot::slotted(goat-card-content:last-child) { 53 | border-bottom: none; 54 | flex: 1; 55 | } 56 | -------------------------------------------------------------------------------- /src/components/card/card.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, Host, Prop } from '@stencil/core'; 2 | 3 | 4 | @Component({ 5 | tag: 'goat-card', 6 | styleUrl: 'card.scss', 7 | shadow: true, 8 | }) 9 | export class Card { 10 | 11 | 12 | @Prop() shadowLevel: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | undefined; 13 | 14 | render() { 15 | return ( 16 | 17 |
18 | 19 |
20 | 21 | ); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/components/card/readme.md: -------------------------------------------------------------------------------- 1 | # goat-heading 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------- | -------------- | ----------- | ----------------------------------------------- | ----------- | 12 | | `shadowLevel` | `shadow-level` | | `"lg" \| "md" \| "sm" \| "xl" \| "xs" \| "xxl"` | `undefined` | 13 | 14 | 15 | ---------------------------------------------- 16 | 17 | *Built with love!* 18 | -------------------------------------------------------------------------------- /src/components/charts/chart-colors.ts: -------------------------------------------------------------------------------- 1 | export type ChartColor = { 2 | color: string; 3 | hoverColor: string; 4 | }; 5 | 6 | export function convertToHex(colorName: string): string { 7 | const computed = getComputedStyle(document.documentElement).getPropertyValue( 8 | colorName, 9 | ); 10 | return computed ? computed : colorName; 11 | } 12 | 13 | export const chartColors: ChartColor[] = [ 14 | { 15 | color: 'var(--color-purple-70)', 16 | hoverColor: 'var(--color-purple-80)', 17 | }, 18 | { 19 | color: 'var(--color-cyan-50)', 20 | hoverColor: 'var(--color-cyan-60)', 21 | }, 22 | { 23 | color: 'var(--color-teal-60)', 24 | hoverColor: 'var(--color-teal-70)', 25 | }, 26 | { 27 | color: 'var(--color-magenta-70)', 28 | hoverColor: 'var(--color-magenta-80)', 29 | }, 30 | ]; 31 | -------------------------------------------------------------------------------- /src/components/charts/chart-doughnut/chart-doughnut.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | @import "../pie/pie"; 3 | 4 | :host { 5 | display: inline-block; 6 | } 7 | 8 | .title { 9 | font-size:v(--heading-03-font-size); 10 | font-weight: 600; 11 | line-height:v(--heading-03-line-height); 12 | letter-spacing: v(--heading-03-letter-spacing); 13 | fill: v(--text-primary); 14 | } 15 | 16 | .label { 17 | font-size: v(--heading-02-font-size); 18 | line-height: v(--heading-02-line-height); 19 | letter-spacing: v(--heading-02-letter-spacing); 20 | fill: v(--text-primary); 21 | } 22 | 23 | .item-polyline { 24 | fill: none; 25 | stroke-width: 1; 26 | stroke: v(--text-primary); 27 | } 28 | 29 | .item-label { 30 | fill: v(--text-primary); 31 | font-size: v(--label-01-font-size); 32 | font-weight: v(--label-01-font-weight); 33 | line-height: v(--label-01-line-height); 34 | letter-spacing: v(--label-01-letter-spacing); 35 | } 36 | -------------------------------------------------------------------------------- /src/components/charts/chart-doughnut/readme.md: -------------------------------------------------------------------------------- 1 | # goat-heading 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------ | ------------- | ----------- | --------- | ----------- | 12 | | `data` | `data` | | `any` | `[]` | 13 | | `label` | `label` | | `string` | `undefined` | 14 | | `margin` | `margin` | | `number` | `10` | 15 | | `showLabels` | `show-labels` | | `boolean` | `true` | 16 | | `width` | `width` | | `number` | `0` | 17 | 18 | 19 | ---------------------------------------------- 20 | 21 | *Built with love!* 22 | -------------------------------------------------------------------------------- /src/components/charts/chart-pie/chart-pie.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | @import "../pie/pie"; 3 | 4 | :host { 5 | display: inline-block; 6 | } 7 | 8 | -------------------------------------------------------------------------------- /src/components/charts/chart-pie/readme.md: -------------------------------------------------------------------------------- 1 | # goat-heading 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------ | ------------- | ----------- | --------- | ----------- | 12 | | `data` | `data` | | `any` | `[]` | 13 | | `label` | `label` | | `string` | `undefined` | 14 | | `margin` | `margin` | | `number` | `10` | 15 | | `showLabels` | `show-labels` | | `boolean` | `true` | 16 | | `width` | `width` | | `number` | `0` | 17 | 18 | 19 | ---------------------------------------------- 20 | 21 | *Built with love!* 22 | -------------------------------------------------------------------------------- /src/components/charts/pie/pie.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | .arc-container path { 4 | stroke: v(--color-light); 5 | stroke-width: 2px; 6 | transition: all 0.1s ease-out; 7 | } 8 | 9 | .item-polyline { 10 | fill: none; 11 | stroke-width: 1; 12 | stroke: v(--text-primary); 13 | } 14 | 15 | .title, .label { 16 | fill: v(--text-primary); 17 | @include font-style(text-md); 18 | } 19 | 20 | .item-label { 21 | fill: v(--text-primary); 22 | font-size: v(--label-01-font-size); 23 | font-weight: v(--label-01-font-weight); 24 | line-height: v(--label-01-line-height); 25 | letter-spacing: v(--label-01-letter-spacing); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/charts/pie/pie.ts: -------------------------------------------------------------------------------- 1 | import { chartColors } from '../chart-colors'; 2 | 3 | export type PieItem = { 4 | name: string; 5 | value: number; 6 | }; 7 | 8 | export function getColorScale(data: PieItem[]) { 9 | const d3 = window['d3']; 10 | return d3 11 | .scaleOrdinal() 12 | .domain(data.map(d => d.name)) 13 | .range(chartColors); 14 | } 15 | 16 | export function getPieData(data: PieItem[]) { 17 | const d3 = window['d3']; 18 | 19 | // Compute the position of each group on the pie: 20 | const pie = d3 21 | .pie() 22 | .sort(null) // Do not sort group by size 23 | .value(d => d.value); 24 | return pie(data); 25 | } 26 | -------------------------------------------------------------------------------- /src/components/container/container.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | ComponentInterface, 4 | Element, 5 | h, 6 | Host, 7 | Prop, 8 | } from '@stencil/core'; 9 | 10 | @Component({ 11 | tag: 'goat-container', 12 | styleUrl: 'container.scss', 13 | shadow: true, 14 | }) 15 | export class Container implements ComponentInterface { 16 | @Element() host!: HTMLElement; 17 | 18 | @Prop({ reflect: true }) 19 | size: 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full' = 'full'; 20 | 21 | render() { 22 | return ( 23 | 24 |
30 |
31 |
32 | 33 |
34 |
35 |
36 | 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/container/readme.md: -------------------------------------------------------------------------------- 1 | # goat-heading 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------- | --------- | ----------- | ------------------------------------------------- | -------- | 12 | | `size` | `size` | | `"full" \| "lg" \| "max" \| "md" \| "sm" \| "xl"` | `'full'` | 13 | 14 | 15 | ---------------------------------------------- 16 | 17 | *Built with love!* 18 | -------------------------------------------------------------------------------- /src/components/divider/divider.tsx: -------------------------------------------------------------------------------- 1 | import { Component, ComponentInterface, Element, h, Host, Prop, State } from '@stencil/core'; 2 | 3 | /** 4 | * @name Divider 5 | * @description A divider can be used to segment content vertically or horizontally. 6 | * @category Layout 7 | * @example or 8 | */ 9 | @Component({ 10 | tag: 'goat-divider', 11 | styleUrl: 'divider.scss', 12 | shadow: true, 13 | }) 14 | export class Divider implements ComponentInterface { 15 | 16 | 17 | @Prop({reflect: true}) vertical: boolean = false; 18 | 19 | @State() slotHasContent = false; 20 | @Element() elm!: HTMLElement; 21 | 22 | componentWillLoad() { 23 | this.slotHasContent = this.elm.hasChildNodes(); 24 | } 25 | 26 | render() { 27 | return ( 28 | 29 |
34 |
35 |
36 | 37 |
38 |
39 |
40 | 41 | ); 42 | } 43 | 44 | 45 | } 46 | -------------------------------------------------------------------------------- /src/components/divider/readme.md: -------------------------------------------------------------------------------- 1 | # goat-heading 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ---------- | ---------- | ----------- | --------- | ------- | 12 | | `vertical` | `vertical` | | `boolean` | `false` | 13 | 14 | 15 | ## CSS Custom Properties 16 | 17 | | Name | Description | 18 | | ------------------------ | ---------------------- | 19 | | `--goat-divider-color` | Color of the divider | 20 | | `--goat-divider-padding` | Padding of the divider | 21 | 22 | 23 | ## Dependencies 24 | 25 | ### Used by 26 | 27 | - [goat-header-brand](../application/header/header-brand) 28 | 29 | ### Graph 30 | ```mermaid 31 | graph TD; 32 | goat-header-brand --> goat-divider 33 | style goat-divider fill:#f9f,stroke:#333,stroke-width:4px 34 | ``` 35 | 36 | ---------------------------------------------- 37 | 38 | *Built with love!* 39 | -------------------------------------------------------------------------------- /src/components/dropdown/dropdown-menu/dropdown-menu.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | transform: scale(0); 6 | top: 0; 7 | left: 0; 8 | position: absolute; 9 | pointer-events: none; 10 | transition: transform 0.1s ease-out 0s; 11 | z-index: v(--z-index-popover); 12 | 13 | --popover-content-shadow: none; 14 | 15 | /** 16 | * @prop --goat-dropdown-menu-max-height: Maximum height of the menu 17 | */ 18 | --goat-dropdown-menu-max-height: 100%; 19 | 20 | min-width: 10rem; 21 | line-height: 0; 22 | } 23 | 24 | 25 | :host-context(goat-dropdown[open]) { 26 | pointer-events: auto; 27 | transform: scale(1); 28 | } 29 | 30 | .dropdown-content { 31 | --goat-menu-max-height: var(--goat-dropdown-menu-max-height); 32 | position: relative; 33 | width: 100%; 34 | filter: var(--popover-content-shadow, none); 35 | --goat-menu-shadow: none; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /src/components/dropdown/dropdown-menu/dropdown-menu.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Component, 3 | ComponentInterface, 4 | Element, 5 | h, 6 | Host, 7 | Method, 8 | } from '@stencil/core'; 9 | import { getComponentIndex } from '../../../utils/utils'; 10 | 11 | /** 12 | * @name Dropdown Menu 13 | * @description The Dropdown Menu component is used to display a list of options. 14 | * @category Navigation 15 | * @subcategory Dropdown 16 | * @childComponent true 17 | */ 18 | @Component({ 19 | tag: 'goat-dropdown-menu', 20 | styleUrl: 'dropdown-menu.scss', 21 | shadow: true, 22 | }) 23 | export class DropdownMenu implements ComponentInterface { 24 | @Element() host!: HTMLElement; 25 | 26 | gid: string = getComponentIndex(); 27 | menuRef: HTMLGoatMenuElement; 28 | 29 | /** 30 | * Sets focus on first menu item. Use this method instead of the global 31 | * `element.focus()`. 32 | */ 33 | @Method() 34 | async setFocus() { 35 | await this.menuRef.setFocus(); 36 | } 37 | 38 | render() { 39 | return ( 40 | 41 | (this.menuRef = elm)}> 42 | 43 | 44 | 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/components/dropdown/dropdown-menu/readme.md: -------------------------------------------------------------------------------- 1 | # goat-dropdown 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Methods 9 | 10 | ### `setFocus() => Promise` 11 | 12 | Sets focus on first menu item. Use this method instead of the global 13 | `element.focus()`. 14 | 15 | #### Returns 16 | 17 | Type: `Promise` 18 | 19 | 20 | 21 | 22 | ## CSS Custom Properties 23 | 24 | | Name | Description | 25 | | --------------------------------- | -------------------------- | 26 | | `--goat-dropdown-menu-max-height` | Maximum height of the menu | 27 | 28 | 29 | ## Dependencies 30 | 31 | ### Depends on 32 | 33 | - [goat-menu](../../menu/menu) 34 | 35 | ### Graph 36 | ```mermaid 37 | graph TD; 38 | goat-dropdown-menu --> goat-menu 39 | goat-menu --> goat-empty-state 40 | goat-empty-state --> goat-svg 41 | goat-empty-state --> goat-button 42 | goat-button --> goat-spinner 43 | goat-button --> goat-icon 44 | style goat-dropdown-menu fill:#f9f,stroke:#333,stroke-width:4px 45 | ``` 46 | 47 | ---------------------------------------------- 48 | 49 | *Built with love!* 50 | -------------------------------------------------------------------------------- /src/components/dropdown/dropdown/dropdown.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | --dropdown-height: inherit; 6 | height: var(--dropdown-height); 7 | } 8 | 9 | .dropdown { 10 | display: inline-block; 11 | height: var(--dropdown-height); 12 | 13 | goat-menu { 14 | --goat-menu-shadow: none; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/icon/constants.ts: -------------------------------------------------------------------------------- 1 | export const ICON_BASE_URL = 'https://cdn.jsdelivr.net/npm/@carbon/icons@11.41.0'; 2 | -------------------------------------------------------------------------------- /src/components/icon/datasource.ts: -------------------------------------------------------------------------------- 1 | import icons from './icons'; 2 | import { ICON_BASE_URL } from './constants'; 3 | import { getAssetPath } from '@stencil/core'; 4 | import { createCacheFetch } from '../../utils/utils'; 5 | 6 | export async function fetchIcon(name: string) { 7 | if (!name) return ''; 8 | 9 | const cacheFetch = await createCacheFetch('goat-icons'); 10 | 11 | const icon = icons.find((icon: any) => icon.name === name); 12 | 13 | if (!icon) return ''; 14 | 15 | let iconBaseUrl: string; 16 | if (process.env.THIRD_PARTY_ASSETS == 'LOCAL') { 17 | iconBaseUrl = getAssetPath('./assets/node_modules/@carbon/icons'); 18 | } else { 19 | iconBaseUrl = ICON_BASE_URL; 20 | } 21 | 22 | return await cacheFetch(`${iconBaseUrl}/svg/${icon.path}`); 23 | } 24 | -------------------------------------------------------------------------------- /src/components/icon/icon.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | line-height: 0; 6 | } 7 | 8 | .icon { 9 | display: block; 10 | line-height: 0; 11 | 12 | /** 13 | * @prop --goat-icon-size - The size of the icon (height and width) 14 | */ 15 | height: var(--goat-icon-size, 1rem); 16 | width: var(--goat-icon-size, 1rem); 17 | 18 | svg { 19 | fill: currentColor; 20 | height: 100%; 21 | width: 100%; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/image/image.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | :host { 4 | display: contents; 5 | } 6 | 7 | img { 8 | max-height: 100%; 9 | max-width: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/image/image.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, Host, Prop, State } from '@stencil/core'; 2 | import { isDarkMode, observeThemeChange } from '../../utils/utils'; 3 | 4 | @Component({ 5 | tag: 'goat-image', 6 | styleUrl: 'image.scss', 7 | shadow: true, 8 | }) 9 | export class Image { 10 | @Prop({ reflect: true }) src: string; 11 | 12 | @Prop({ reflect: true }) darkSrc: string; 13 | 14 | @Prop() imageTitle: string; 15 | 16 | @State() isDarkMode: boolean = isDarkMode(); 17 | 18 | componentWillLoad() { 19 | observeThemeChange(() => { 20 | this.isDarkMode = isDarkMode(); 21 | }); 22 | } 23 | 24 | render() { 25 | if (this.isDarkMode && this.darkSrc) { 26 | return ( 27 | 28 | {this.imageTitle} 29 | 30 | ); 31 | } else { 32 | return ( 33 | 34 | {this.imageTitle} 35 | 36 | ); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/components/image/readme.md: -------------------------------------------------------------------------------- 1 | # goat-icon 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ------------ | ------------- | ----------- | -------- | ----------- | 12 | | `darkSrc` | `dark-src` | | `string` | `undefined` | 13 | | `imageTitle` | `image-title` | | `string` | `undefined` | 14 | | `src` | `src` | | `string` | `undefined` | 15 | 16 | 17 | ---------------------------------------------- 18 | 19 | *Built with love!* 20 | -------------------------------------------------------------------------------- /src/components/input-controls/data-and-time/date/date-picker/date-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../../../common-input"; 2 | 3 | input[type="date"]::-webkit-inner-spin-button, 4 | input[type="date"]::-webkit-calendar-picker-indicator { 5 | display: none; 6 | -webkit-appearance: none; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/input-controls/data-and-time/date/time-picker/time-picker.scss: -------------------------------------------------------------------------------- 1 | @import "../../../common-input"; 2 | 3 | input[type="time"]::-webkit-inner-spin-button, 4 | input[type="time"]::-webkit-calendar-picker-indicator { 5 | display: none; 6 | -webkit-appearance: none; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/input-controls/form-control/form-control.scss: -------------------------------------------------------------------------------- 1 | @import "../common-input"; 2 | 3 | 4 | :host(.form-field) { 5 | margin-bottom: v(--spacing-07); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/input-controls/input.interface.tsx: -------------------------------------------------------------------------------- 1 | interface InputComponentInterface { 2 | 3 | required?: boolean; 4 | disabled?: boolean; 5 | name: string; 6 | 7 | getComponentId(): Promise; 8 | setFocus(): void; 9 | setBlur(): void; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/input-controls/input/input/input.scss: -------------------------------------------------------------------------------- 1 | @import "../../common-input"; 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/components/input-controls/input/number/number.scss: -------------------------------------------------------------------------------- 1 | @import "../../common-input"; 2 | -------------------------------------------------------------------------------- /src/components/input-controls/input/textarea/textarea.scss: -------------------------------------------------------------------------------- 1 | @import "../../common-input"; 2 | 3 | :host { 4 | --goat-textarea-height: 2.5rem; 5 | } 6 | 7 | .textarea { 8 | height: 100%; 9 | position: relative; 10 | align-items: flex-start; 11 | 12 | .input-native { 13 | height: 100%; 14 | min-height: var(--goat-textarea-height); 15 | resize: vertical; 16 | padding:v(--spacing-05); 17 | } 18 | } 19 | 20 | .actions-container { 21 | position: absolute; 22 | right: 1rem; 23 | top: 0.5rem; 24 | 25 | goat-button { 26 | --goat-button-height: 2rem; 27 | } 28 | } 29 | 30 | :host([size=md]) .input-container { 31 | height: 100%; 32 | min-height: var(--goat-textarea-height); 33 | } 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/components/link/link.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | 4 | :host { 5 | display: inline-block; 6 | } 7 | 8 | .link { 9 | height: 100%; 10 | border-radius: var(--border-radius); 11 | display: flex; 12 | align-items: center; 13 | flex-direction: row; 14 | cursor: pointer; 15 | text-decoration: var(--link-decoration, none); 16 | 17 | color: var(--link-color, var(--link-01)); 18 | 19 | &:hover { 20 | color: var(--link-color-hover, var(--hover-primary-text)); 21 | text-decoration: var(--link-decoration-hover, underline); 22 | } 23 | 24 | &:visited { 25 | color: var(--link-color-visited, var(--visited-link)); 26 | } 27 | 28 | &.active { 29 | color: var(--link-color-active, var(--text-primary)); 30 | } 31 | 32 | 33 | } 34 | 35 | :host(.no-style) .link { 36 | color: inherit !important; 37 | text-decoration: none !important; 38 | } 39 | 40 | :host(.no-decoration) .link { 41 | text-decoration: none !important; 42 | } 43 | 44 | :host(.inline) .link { 45 | text-decoration: var(--link-decoration, underline); 46 | } 47 | 48 | .link.has-focus:not(.active) { 49 | text-decoration: none; 50 | @include focus-ring(); 51 | } 52 | -------------------------------------------------------------------------------- /src/components/menu/menu-divider/menu-divider.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | width: 100%; 6 | padding: v(--spacing-02) 0; 7 | } 8 | 9 | .divider { 10 | border-top: 1px solid v(--border-subtle); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/menu/menu-divider/menu-divider.tsx: -------------------------------------------------------------------------------- 1 | import { Component, ComponentInterface, h, Host } from '@stencil/core'; 2 | 3 | /** 4 | * @name MenuDivider 5 | * @description A divider to separate menu items. 6 | * @category Layout 7 | * @subcategory Menu 8 | * @childComponents true 9 | * @example or 10 | */ 11 | @Component({ 12 | tag: 'goat-menu-divider', 13 | styleUrl: 'menu-divider.scss', 14 | shadow: true, 15 | }) 16 | export class MenuDivider implements ComponentInterface { 17 | render() { 18 | return ( 19 | 20 |
21 | 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/menu/menu-divider/readme.md: -------------------------------------------------------------------------------- 1 | # goat-heading 2 | 3 | 4 | 5 | 6 | 7 | 8 | ---------------------------------------------- 9 | 10 | *Built with love!* 11 | -------------------------------------------------------------------------------- /src/components/menu/menu/menu.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | 4 | :host { 5 | display: inline-block; 6 | /** 7 | * @prop --goat-menu-background: Background color of the menu 8 | */ 9 | --goat-menu-background: var(--layer); 10 | 11 | /** 12 | * @prop --goat-menu-max-height: Maximum height of the menu 13 | */ 14 | --goat-menu-max-height: 100%; 15 | 16 | /** 17 | * @prop --goat-menu-shadow: Shadow of the menu 18 | */ 19 | --goat-menu-shadow: 0 2px 6px 0 rgba(0,0,0,.2); 20 | 21 | min-width: 10rem; 22 | } 23 | 24 | .menu { 25 | background: var(--goat-menu-background); 26 | box-sizing: border-box; 27 | max-height: var(--goat-menu-max-height); 28 | overflow-x: auto; 29 | border: 1px solid #{v(--border-subtle)}; 30 | box-shadow: var(--goat-menu-shadow); 31 | padding-block: v(--spacing-02); 32 | } 33 | 34 | :host(.no-border) .menu { 35 | border: none; 36 | box-shadow: none; 37 | } 38 | -------------------------------------------------------------------------------- /src/components/modal/modal-content/modal-content.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | :host([type='text']) .modal-content { 8 | padding: 0 20% 0 var(--spacing-05); 9 | } 10 | 11 | :host([type='default']) .modal-content { 12 | padding: 0 var(--spacing-05); 13 | } 14 | -------------------------------------------------------------------------------- /src/components/modal/modal-content/modal-content.tsx: -------------------------------------------------------------------------------- 1 | import { Component, h, Host, Prop } from '@stencil/core'; 2 | 3 | /** 4 | * @name Modal Content 5 | * @description The Modal Content component is used to display the content within a modal. 6 | * @category Informational 7 | * @subcategory Modal 8 | * @childComponent true 9 | */ 10 | @Component({ 11 | tag: 'goat-modal-content', 12 | styleUrl: 'modal-content.scss', 13 | shadow: true, 14 | }) 15 | export class ModalContent { 16 | @Prop({ reflect: true }) type: 'text' | 'borderless' | 'default' = 'default'; 17 | 18 | render() { 19 | return ( 20 | 21 |
22 | 23 |
24 | 25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/modal/modal-content/readme.md: -------------------------------------------------------------------------------- 1 | # p4-modal 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------- | --------- | ----------- | ------------------------------------- | ----------- | 12 | | `type` | `type` | | `"borderless" \| "default" \| "text"` | `'default'` | 13 | 14 | 15 | ---------------------------------------------- 16 | 17 | *Built with love!* 18 | -------------------------------------------------------------------------------- /src/components/notification-manager/readme.md: -------------------------------------------------------------------------------- 1 | # goat-alert 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | ---------- | ---------- | ----------- | -------------------------------------------------------------- | ---------------- | 12 | | `name` | `name` | | `string` | `'global'` | 13 | | `position` | `position` | | `"bottom-left" \| "bottom-right" \| "top-left" \| "top-right"` | `'bottom-right'` | 14 | 15 | 16 | ## Dependencies 17 | 18 | ### Depends on 19 | 20 | - [goat-notification](../notification) 21 | 22 | ### Graph 23 | ```mermaid 24 | graph TD; 25 | goat-notification-manager --> goat-notification 26 | goat-notification --> goat-icon 27 | goat-notification --> goat-button 28 | goat-button --> goat-spinner 29 | goat-button --> goat-icon 30 | style goat-notification-manager fill:#f9f,stroke:#333,stroke-width:4px 31 | ``` 32 | 33 | ---------------------------------------------- 34 | 35 | *Built with love!* 36 | -------------------------------------------------------------------------------- /src/components/popover/popover-content/popover-content.tsx: -------------------------------------------------------------------------------- 1 | import { Component, ComponentInterface, Element, h, Host } from '@stencil/core'; 2 | import { getComponentIndex } from '../../../utils/utils'; 3 | 4 | /** 5 | * @name Popover Content 6 | * @description The PopoverContent component is used to display additional information. 7 | * @category Informational 8 | * @subcategory Popover 9 | * @childComponent true 10 | */ 11 | @Component({ 12 | tag: 'goat-popover-content', 13 | styleUrl: 'popover-content.scss', 14 | shadow: true, 15 | }) 16 | export class PopoverContent implements ComponentInterface { 17 | @Element() host!: HTMLElement; 18 | 19 | gid: string = getComponentIndex(); 20 | 21 | render() { 22 | return ( 23 | 24 |
25 | 26 | 27 |
28 |
29 | 30 | ); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/popover/popover-content/readme.md: -------------------------------------------------------------------------------- 1 | # goat-dropdown 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## CSS Custom Properties 9 | 10 | | Name | Description | 11 | | --------------------------------- | --------------------------------------- | 12 | | `--goat-menu-shadow` | Shadow of popover content | 13 | | `--popover-content-background` | Background color of the popover content | 14 | | `--popover-content-border-radius` | Border radius of the popover content | 15 | | `--popover-padding` | Padding of the popover content | 16 | 17 | 18 | ## Dependencies 19 | 20 | ### Used by 21 | 22 | - [goat-tooltip](../../tooltip) 23 | 24 | ### Graph 25 | ```mermaid 26 | graph TD; 27 | goat-tooltip --> goat-popover-content 28 | style goat-popover-content fill:#f9f,stroke:#333,stroke-width:4px 29 | ``` 30 | 31 | ---------------------------------------------- 32 | 33 | *Built with love!* 34 | -------------------------------------------------------------------------------- /src/components/popover/popover/popover.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | --goat-popover-tiptab-padding: 0.5rem; 6 | --goat-popover-height: inherit; 7 | height: var(--goat-popover-height); 8 | } 9 | 10 | .popover { 11 | height: var(--goat-popover-height); 12 | 13 | &.tip-tab { 14 | padding: var(--goat-popover-tiptab-padding); 15 | line-height: 0; 16 | transition: background 0.1s ease-out 0s; 17 | 18 | &.open { 19 | background: var(--layer); 20 | } 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /src/components/popover/types.tsx: -------------------------------------------------------------------------------- 1 | export type PopoverTriggerType = 'click' | 'hover' | 'manual'; 2 | -------------------------------------------------------------------------------- /src/components/svg/datasource.ts: -------------------------------------------------------------------------------- 1 | import { createCacheFetch } from '../../utils/utils'; 2 | 3 | export async function fetchSVG(url) { 4 | if (!url) return ''; 5 | 6 | const cacheFetch = await createCacheFetch('goat-svg'); 7 | 8 | return await cacheFetch(url); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/svg/readme.md: -------------------------------------------------------------------------------- 1 | # goat-icon 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------- | --------- | -------------- | -------- | ----------- | 12 | | `size` | `size` | The Icon size. | `string` | `undefined` | 13 | | `src` | `src` | | `string` | `''` | 14 | 15 | 16 | ## Dependencies 17 | 18 | ### Used by 19 | 20 | - [goat-empty-state](../application/empty-state) 21 | - [goat-header-brand](../application/header/header-brand) 22 | 23 | ### Graph 24 | ```mermaid 25 | graph TD; 26 | goat-empty-state --> goat-svg 27 | goat-header-brand --> goat-svg 28 | style goat-svg fill:#f9f,stroke:#333,stroke-width:4px 29 | ``` 30 | 31 | ---------------------------------------------- 32 | 33 | *Built with love!* 34 | -------------------------------------------------------------------------------- /src/components/svg/svg.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | } 6 | 7 | .icon { 8 | line-height: 0; 9 | height: 100%; 10 | width: 100%; 11 | } 12 | 13 | :host(:not([size])) svg { 14 | height: 100%; 15 | width: 100%; 16 | } 17 | 18 | :host(.inherit) .icon { 19 | color: inherit; 20 | } 21 | -------------------------------------------------------------------------------- /src/components/tabs/tab-panel/readme.md: -------------------------------------------------------------------------------- 1 | # goat-tab 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------- | --------- | ----------- | ------------------------------ | ----------- | 12 | | `active` | `active` | | `boolean` | `false` | 13 | | `layer` | `layer` | | `"01" \| "02" \| "background"` | `undefined` | 14 | | `value` | `value` | | `string` | `undefined` | 15 | 16 | 17 | ---------------------------------------------- 18 | 19 | *Built with love!* 20 | -------------------------------------------------------------------------------- /src/components/tabs/tab-panel/tab-panel.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | 4 | :host { 5 | display: none; 6 | } 7 | 8 | :host([active]) { 9 | display: block; 10 | flex: 1; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/tabs/tab-panel/tab-panel.tsx: -------------------------------------------------------------------------------- 1 | import { Component, ComponentInterface, h, Host, Prop } from '@stencil/core'; 2 | 3 | @Component({ 4 | tag: 'goat-tab-panel', 5 | styleUrl: 'tab-panel.scss', 6 | shadow: true, 7 | }) 8 | export class TabPanel implements ComponentInterface { 9 | @Prop({ reflect: true }) value: string; 10 | 11 | @Prop({ reflect: true }) active: boolean = false; 12 | 13 | @Prop({ reflect: true }) layer?: 'background' | '01' | '02'; 14 | 15 | render() { 16 | return ( 17 | 18 | 19 | 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/components/tabs/tabs-list/readme.md: -------------------------------------------------------------------------------- 1 | # goat-tabs 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | --------- | --------- | ----------- | ------------------------------------------------ | ----------- | 12 | | `managed` | `managed` | | `boolean` | `false` | 13 | | `type` | `type` | | `"contained" \| "contained-bottom" \| "default"` | `'default'` | 14 | 15 | 16 | ---------------------------------------------- 17 | 18 | *Built with love!* 19 | -------------------------------------------------------------------------------- /src/components/tabs/tabs-list/tabs-list.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | 4 | .tabs-list { 5 | display: flex; 6 | position: relative; 7 | 8 | &:before { 9 | content: ''; 10 | position: absolute; 11 | bottom: 0; 12 | display: block; 13 | width: 100%; 14 | } 15 | 16 | .tabs-container { 17 | display: flex; 18 | align-items: flex-end; 19 | z-index: 1; 20 | } 21 | } 22 | 23 | .tabs-list.type-default { 24 | &:before { 25 | border-bottom: 2px solid v(--border-subtle); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/components/tabs/tabs/readme.md: -------------------------------------------------------------------------------- 1 | # goat-tabs 2 | 3 | 4 | 5 | 6 | 7 | 8 | ## Properties 9 | 10 | | Property | Attribute | Description | Type | Default | 11 | | -------- | --------- | ----------- | ------------------------------------------------ | ----------- | 12 | | `layer` | `layer` | | `"01" \| "02" \| "background"` | `undefined` | 13 | | `type` | `type` | | `"contained" \| "contained-bottom" \| "default"` | `'default'` | 14 | 15 | 16 | ---------------------------------------------- 17 | 18 | *Built with love!* 19 | -------------------------------------------------------------------------------- /src/components/tabs/tabs/tabs.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: flex; 5 | flex-direction: column; 6 | height: 100%; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/tooltip/tooltip.scss: -------------------------------------------------------------------------------- 1 | @import "../../globalStyles/commons"; 2 | 3 | :host { 4 | display: inline-block; 5 | --goat-tooltip-height: inherit; 6 | height: var(--goat-tooltip-height); 7 | } 8 | 9 | .popover { 10 | --goat-popover-height: var(--goat-tooltip-height); 11 | } 12 | 13 | .tooltip-content { 14 | @include font-style(label-01); 15 | color: var(--text-inverse); 16 | max-width: 18rem; 17 | --popover-content-background: var(--background-inverse); 18 | --popover-content-padding: var(--spacing-03) var(--spacing-05); 19 | --popover-content-border-radius: 0; 20 | --popover-content-caret-size: 0.5rem; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/tree-view/tree-view/tree-view.scss: -------------------------------------------------------------------------------- 1 | @import "../../../globalStyles/commons"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | .tree-view { 8 | background-color: var(--layer); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/url-input/url-input.scss: -------------------------------------------------------------------------------- 1 | @import "../../components/input-controls/common-input"; 2 | 3 | :host { 4 | display: block; 5 | } 6 | 7 | /* URL-specific styles */ 8 | .input-container.invalid { 9 | border-color: var(--support-error); 10 | } 11 | 12 | .input-container.has-focus.invalid { 13 | box-shadow: 0 0 0 0.125rem var(--support-error); 14 | } 15 | 16 | .helper.invalid { 17 | color: var(--support-error-inverse); 18 | } -------------------------------------------------------------------------------- /src/globalStyles/functions.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "sass:list"; 3 | @import 'theme/css-variables'; 4 | 5 | @function v($name) { 6 | @return var(#{$name}, map.get($css-variables, $name)); 7 | } 8 | -------------------------------------------------------------------------------- /src/globalStyles/theme/css-variables.scss: -------------------------------------------------------------------------------- 1 | @import 'tokens/color'; 2 | @import 'tokens/spacing'; 3 | @import 'tokens/shadow'; 4 | @import 'tokens/typography'; 5 | @import 'tokens/common'; 6 | @import 'tokens/breakpoints'; 7 | 8 | $css-variables: (); 9 | 10 | $css-variables: map-merge($css-variables, $color-css-variables); 11 | $css-variables: map-merge($css-variables, $typography-css-variables); 12 | $css-variables: map-merge($css-variables, $spacing-css-variables); 13 | $css-variables: map-merge($css-variables, $shadows-css-variables); 14 | $css-variables: map-merge($css-variables, $common-css-variables); 15 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | $common: ( 4 | border-radius: 3px, 5 | /** 6 | * TIP: use against position:relative elements 7 | */ 8 | z-index-button: 0, 9 | z-index-badge: 20, 10 | z-index-table-header: 30, 11 | z-index-dropdown-content: 40, 12 | z-index-notification-manager: 100, 13 | z-index-modal: 2000, 14 | z-index-popover: 3000, 15 | z-index-tooltip: 4000, 16 | scrollbar-width: 0.75rem 17 | ); 18 | 19 | $common-css-variables: (); 20 | @each $key, $value in $common { 21 | $map: (); 22 | $map: map-merge($map, ("--"+$key: $value)); 23 | $common-css-variables: map-merge($common-css-variables, $map); 24 | } 25 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/_common.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | $common: ( 4 | border-radius: 3px, 5 | /** 6 | * TIP: use against position:relative elements 7 | */ 8 | z-index-button: 0, 9 | z-index-badge: 20, 10 | z-index-table-header: 30, 11 | z-index-dropdown-content: 40, 12 | z-index-notification-manager: 100, 13 | z-index-modal: 2000, 14 | z-index-tooltip: 3000, 15 | scrollbar-width: 0.75rem 16 | ); 17 | 18 | $common-css-variables: (); 19 | @each $key, $value in $common { 20 | $map: (); 21 | $map: map-merge($map, ("--"+$key: $value)); 22 | $common-css-variables: map-merge($common-css-variables, $map); 23 | } 24 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/_shadow.scss: -------------------------------------------------------------------------------- 1 | $shadows: ( 2 | xs: 0px 1px 2px rgba(16, 24, 40, 0.05), 3 | sm: (0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06)), 4 | md: (0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)), 5 | lg: (0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)), 6 | xl: (0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03)), 7 | xxl: (0px 24px 48px -12px rgba(16, 24, 40, 0.18)), 8 | xxxl: (0px 32px 64px -12px rgba(16, 24, 40, 0.14)), 9 | ); 10 | 11 | $shadows-css-variables: (); 12 | 13 | @each $key, $value in $shadows { 14 | $map: (); 15 | $map: map-merge($map, (--shadow-#{$key}: $value)); 16 | $shadows-css-variables: map-merge($shadows-css-variables, $map); 17 | } 18 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/_spacing.scss: -------------------------------------------------------------------------------- 1 | $base-space: 0.125; 2 | 3 | $spacing: ( 4 | "01": $base-space, 5 | "02": 2 * $base-space, 6 | "03": 4 * $base-space, 7 | "04": 6 * $base-space, 8 | "05": 8 * $base-space, 9 | "06": 12 * $base-space, 10 | "07": 16 * $base-space, 11 | "08": 20 * $base-space, 12 | "09": 24 * $base-space, 13 | "10": 32 * $base-space, 14 | "11": 40 * $base-space, 15 | "12": 48 * $base-space, 16 | "13": 80 * $base-space, 17 | ); 18 | 19 | $container-sizing: ( 20 | sm: 320, 21 | md: 672, 22 | lg: 1056, 23 | xl: 1312, 24 | max: 1584 25 | ); 26 | 27 | $spacing-css-variables: (); 28 | 29 | @each $key, $value in $spacing { 30 | $map: (); 31 | $map: map-merge($map, (--spacing-#{$key}: #{$value}rem)); 32 | $spacing-css-variables: map-merge($spacing-css-variables, $map); 33 | } 34 | 35 | @each $key, $value in $container-sizing { 36 | $map: (); 37 | $map: map-merge($map, (--container-#{$key}: #{$value}px)); 38 | $spacing-css-variables: map-merge($spacing-css-variables, $map); 39 | } 40 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/color/background-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | * Default page background; 4 | * UI Shell base color 5 | */ 6 | @include defineThemeVariable(--background, getColor(white, 0), getColor(gray, 10), getColor(gray, 90), getColor(gray, 100)); 7 | 8 | @include defineVariableDeprecated(--background-hover, getColor(gray, 50, 0.12), getColor(gray, 50, 0.16)); 9 | @include defineVariableDeprecated(--background-active, getColor(gray, 50, 0.5), getColor(gray, 50, 0.4)); 10 | 11 | @include defineVariableDeprecated(--border-inverse, getColor(gray, 100), getColor(gray, 10)); 12 | 13 | @include defineVariableDeprecated(--background-inverse, getColor(gray, 80), getColor(gray, 10)); 14 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/color/field-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | Default input fields; 4 | Fields on $backgrounds 5 | */ 6 | @include defineThemeVariable(--field-01, getColor(gray, 10), getColor(white, 0), getColor(gray, 80), getColor(gray, 90)); 7 | 8 | /* 9 | Secondary input fields; 10 | Fields on $layer-01 11 | */ 12 | @include defineVariableDeprecated(--field-02, getColor(white, 0), getColor(gray, 80)); 13 | 14 | /* 15 | Secondary input fields; 16 | Fields on $layer-02 17 | */ 18 | @include defineVariableDeprecated(--field-03, getColor(gray, 10), getColor(gray, 70)); 19 | 20 | /* 21 | Hover color for $field-01 22 | */ 23 | @include defineVariableDeprecated(--field-hover-01, getColor(gray-hover, 10), getColor(gray-hover, 90)); 24 | 25 | /* 26 | Hover color for $field-02 27 | */ 28 | @include defineVariableDeprecated(--field-hover-02, getColor(gray-hover, 10), getColor(gray-hover, 80)); 29 | 30 | /* 31 | Hover color for $field-03 32 | */ 33 | @include defineVariableDeprecated(--field-hover-03, getColor(gray-hover, 10), getColor(gray-hover, 70)); 34 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/color/icon-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | Primary icons 4 | */ 5 | @include defineThemeVariable(--icon-primary, getColor(gray, 100), getColor(gray, 100), getColor(gray, 10), getColor(gray, 10)); 6 | 7 | /* 8 | 9 | Inverse icon color 10 | */ 11 | @include defineVariableDeprecated(--icon-inverse, getColor(white, 0), getColor(gray, 100)); 12 | 13 | 14 | @include defineThemeVariable(--icon-secondary, getColor(gray, 70), getColor(gray, 70), getColor(gray, 30), getColor(gray, 30)); 15 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/color/skeleton-colors.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton color for text and UI elements 3 | */ 4 | @include defineThemeVariable(--skeleton-element, getColor(gray, 30), getColor(gray, 30), getColor(gray, 70), getColor(gray, 70)); 5 | 6 | /* 7 | * Skeleton color for containers 8 | */ 9 | @include defineThemeVariable(--skeleton-background, getColor(gray-hover, 10), getColor(gray-hover, 10), getColor(gray-hover, 80), getColor(gray-hover, 80)); 10 | -------------------------------------------------------------------------------- /src/globalStyles/theme/tokens/color/text-colors.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | Primary text; 4 | Body copy; 5 | Headers; 6 | Hover text color for --text-secondary 7 | */ 8 | @include defineVariableDeprecated(--text-primary, getColor(gray, 100), getColor(gray, 10)); 9 | 10 | /** 11 | * Secondary text; 12 | * Input labels 13 | */ 14 | @include defineVariableDeprecated(--text-secondary, getColor(gray, 70), getColor(gray, 30)); 15 | 16 | /** 17 | * Placeholder text 18 | */ 19 | @include defineVariableDeprecated(--text-placeholder, getColor(gray, 40), getColor(gray, 60)); 20 | 21 | /** 22 | Text on interactive colors; 23 | Text on button colors 24 | */ 25 | @include defineVariableDeprecated(--text-on-color, getColor(white, 0), getColor(white, 0)); 26 | 27 | 28 | /** 29 | Tertiary text; 30 | Help text 31 | */ 32 | @include defineVariableDeprecated(--text-helper, getColor(gray, 60), getColor(gray, 50)); 33 | 34 | /** 35 | Error message text 36 | */ 37 | @include defineVariableDeprecated(--text-error, getColor(red, 60), getColor(red, 40)); 38 | 39 | /** 40 | Inverse text color 41 | */ 42 | @include defineVariableDeprecated(--text-inverse, getColor(white, 0), getColor(gray, 100)); 43 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { Components, JSX } from './components'; 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2017" 10 | ], 11 | "moduleResolution": "node", 12 | "module": "esnext", 13 | "target": "es2017", 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "jsx": "react", 17 | "jsxFactory": "h" 18 | }, 19 | "include": [ 20 | "src" 21 | ], 22 | "exclude": [ 23 | "node_modules" 24 | ] 25 | } 26 | --------------------------------------------------------------------------------