├── projects ├── demo │ ├── src │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ ├── index.ts │ │ │ └── i18n │ │ │ │ ├── custom-en.ts │ │ │ │ ├── custom-fr.ts │ │ │ │ └── la.ts │ │ ├── app │ │ │ ├── app.component.scss │ │ │ ├── welcome-page │ │ │ │ ├── welcome-page.component.scss │ │ │ │ └── welcome-page.component.ts │ │ │ ├── demo │ │ │ │ ├── pages │ │ │ │ │ ├── sidenav-page │ │ │ │ │ │ └── sidenav-page.component.scss │ │ │ │ │ ├── container-page │ │ │ │ │ │ ├── container-page.component.scss │ │ │ │ │ │ └── container-demo │ │ │ │ │ │ │ └── container-demo.component.ts │ │ │ │ │ ├── scroll-pages │ │ │ │ │ │ ├── infinite-scroll-page.component.scss │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── data-card │ │ │ │ │ │ │ ├── data-card.component.html │ │ │ │ │ │ │ ├── data-card.component.ts │ │ │ │ │ │ │ └── data-card.component.scss │ │ │ │ │ │ ├── infinite-scroll-demo │ │ │ │ │ │ │ ├── infinite-scroll-demo.component.html │ │ │ │ │ │ │ └── infinite-scroll-demo.component.scss │ │ │ │ │ │ └── infinite-scroll-page.component.ts │ │ │ │ │ ├── accordion-page │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── translate-page │ │ │ │ │ │ └── translate-page.component.scss │ │ │ │ │ ├── modal-page │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── modal-page.component.scss │ │ │ │ │ │ ├── modal-example │ │ │ │ │ │ │ ├── modal-example.component.scss │ │ │ │ │ │ │ └── modal-example.component.ts │ │ │ │ │ │ └── dialog-example │ │ │ │ │ │ │ └── dialog-without-footer-example.component.html │ │ │ │ │ ├── confirmation-dialog-page │ │ │ │ │ │ └── confirmation-dialog-page.component.scss │ │ │ │ │ ├── form-control-page │ │ │ │ │ │ ├── value-example │ │ │ │ │ │ │ └── form-control-value-example.component.scss │ │ │ │ │ │ ├── state-example │ │ │ │ │ │ │ └── form-control-state-example.component.scss │ │ │ │ │ │ ├── name-example │ │ │ │ │ │ │ └── form-control-name-example.component.scss │ │ │ │ │ │ ├── usage │ │ │ │ │ │ │ └── pa-form-control-usage.component.ts │ │ │ │ │ │ ├── validation-example │ │ │ │ │ │ │ └── form-control-validation-example.component.scss │ │ │ │ │ │ ├── form-control-page.component.scss │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── grid-page │ │ │ │ │ │ ├── grid-page.component.ts │ │ │ │ │ │ └── grid-page.component.scss │ │ │ │ │ ├── chip-page │ │ │ │ │ │ └── chip-page.component.scss │ │ │ │ │ ├── palette-page │ │ │ │ │ │ └── palette-page.component.ts │ │ │ │ │ ├── distribute-page │ │ │ │ │ │ └── distribute-page.component.ts │ │ │ │ │ ├── radio-page │ │ │ │ │ │ └── radio-page.component.scss │ │ │ │ │ ├── expand-page │ │ │ │ │ │ └── expander-page.component.scss │ │ │ │ │ ├── button-page │ │ │ │ │ │ ├── button-usage │ │ │ │ │ │ │ └── button-usage.component.ts │ │ │ │ │ │ ├── button-description │ │ │ │ │ │ │ └── button-description.component.ts │ │ │ │ │ │ └── button-page.component.scss │ │ │ │ │ ├── common-doc │ │ │ │ │ │ ├── base-control │ │ │ │ │ │ │ └── base-control-usage.component.ts │ │ │ │ │ │ ├── form-field-config-standalone.directive.ts │ │ │ │ │ │ ├── form-field-config-ng-model.directive.ts │ │ │ │ │ │ └── form-field-config-form-control.directive.ts │ │ │ │ │ ├── ellipsis-tooltip-page │ │ │ │ │ │ └── ellipsis-tooltip-page.component.scss │ │ │ │ │ ├── popup-page │ │ │ │ │ │ └── popup-component-usage │ │ │ │ │ │ │ └── popup-component-usage.component.ts │ │ │ │ │ ├── table-page │ │ │ │ │ │ ├── common-table-description │ │ │ │ │ │ │ └── common-table-description.component.ts │ │ │ │ │ │ └── table-sortable-header-cell-page │ │ │ │ │ │ │ └── table-sortable-header-cell-page.component.ts │ │ │ │ │ ├── avatar-page │ │ │ │ │ │ ├── avatar-page.component.scss │ │ │ │ │ │ └── avatar-page.component.ts │ │ │ │ │ ├── accessibility │ │ │ │ │ │ ├── accessibility-page.component.html │ │ │ │ │ │ └── accessibility-page.component.ts │ │ │ │ │ ├── input-page │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── input-form-group-example │ │ │ │ │ │ │ └── input-form-group-example.component.ts │ │ │ │ │ │ ├── input-standalone-example │ │ │ │ │ │ │ └── input-standalone-example.component.ts │ │ │ │ │ │ ├── input-form-control-example │ │ │ │ │ │ │ └── input-form-control-example.component.ts │ │ │ │ │ │ └── input-ng-model-example │ │ │ │ │ │ │ └── input-ng-model-example.component.ts │ │ │ │ │ ├── native-text-field-page │ │ │ │ │ │ └── usage │ │ │ │ │ │ │ └── native-text-field-usage.component.ts │ │ │ │ │ ├── focusable-page │ │ │ │ │ │ └── focusable-page.component.ts │ │ │ │ │ ├── select-page │ │ │ │ │ │ └── index.ts │ │ │ │ │ ├── text-area-page │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── textarea-form-group-example │ │ │ │ │ │ │ └── textarea-form-group-example.component.ts │ │ │ │ │ │ ├── textarea-standalone-example │ │ │ │ │ │ │ └── textarea-standalone-example.component.ts │ │ │ │ │ │ ├── textarea-form-control-example │ │ │ │ │ │ │ └── textarea-form-control-example.component.ts │ │ │ │ │ │ └── textarea-ng-model-example │ │ │ │ │ │ │ └── textarea-ng-model-example.component.ts │ │ │ │ │ ├── date-picker-page │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── date-picker-form-control-example │ │ │ │ │ │ │ ├── date-picker-form-control-example.component.html │ │ │ │ │ │ │ └── date-picker-form-control-example.component.ts │ │ │ │ │ │ ├── date-picker-form-group-example │ │ │ │ │ │ │ ├── date-picker-form-group-example.component.html │ │ │ │ │ │ │ └── date-picker-form-group-example.component.ts │ │ │ │ │ │ ├── date-picker-standalone-example │ │ │ │ │ │ │ ├── date-picker-standalone-example.component.html │ │ │ │ │ │ │ └── date-picker-standalone-example.component.ts │ │ │ │ │ │ └── date-picker-ng-model-example │ │ │ │ │ │ │ ├── date-picker-ng-model-example.component.ts │ │ │ │ │ │ │ └── date-picker-ng-model-example.component.html │ │ │ │ │ ├── tabs-page │ │ │ │ │ │ └── tabs-page.component.scss │ │ │ │ │ ├── scrollbar-page │ │ │ │ │ │ └── scrollbar-page.component.ts │ │ │ │ │ ├── icon-page │ │ │ │ │ │ ├── icon-page.component.scss │ │ │ │ │ │ └── icon-page.component.ts │ │ │ │ │ ├── card-page │ │ │ │ │ │ └── card-page.component.ts │ │ │ │ │ ├── typography-page │ │ │ │ │ │ ├── typography-page.component.scss │ │ │ │ │ │ └── typography-page.component.ts │ │ │ │ │ ├── tooltip-page │ │ │ │ │ │ └── tooltip-page.component.ts │ │ │ │ │ ├── popover-page │ │ │ │ │ │ └── popover-page.component.scss │ │ │ │ │ ├── form-field-description.component.ts │ │ │ │ │ └── breakpoint-page │ │ │ │ │ │ └── breakpoint-page.component.ts │ │ │ │ ├── demo.component.html │ │ │ │ └── demo.directives.ts │ │ │ ├── app.component.html │ │ │ └── app-routing.module.ts │ │ ├── index.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.png │ │ ├── main.ts │ │ ├── index.html │ │ └── styles.scss │ ├── tsconfig.app.json │ └── tsconfig.spec.json └── pastanaga-angular │ ├── src │ ├── index.ts │ ├── lib │ │ ├── card │ │ │ ├── card.component.scss │ │ │ ├── index.ts │ │ │ ├── card.component.html │ │ │ ├── card.module.ts │ │ │ └── card.component.ts │ │ ├── controls │ │ │ ├── textfield │ │ │ │ ├── typeahead-select │ │ │ │ │ └── typeahead-select.component.scss │ │ │ │ ├── input │ │ │ │ │ └── input.component.scss │ │ │ │ ├── select │ │ │ │ │ └── index.ts │ │ │ │ ├── textarea │ │ │ │ │ └── index.ts │ │ │ │ └── index.ts │ │ │ ├── slider │ │ │ │ ├── index.ts │ │ │ │ └── slider.module.ts │ │ │ ├── form-field │ │ │ │ ├── index.ts │ │ │ │ ├── form-field-hint │ │ │ │ │ └── form-field-hint.component.html │ │ │ │ └── form-field.module.ts │ │ │ ├── toggles │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ ├── breakpoint-observer │ │ │ └── index.ts │ │ ├── button │ │ │ ├── button.component.scss │ │ │ ├── index.ts │ │ │ ├── button.module.ts │ │ │ └── button.component.html │ │ ├── accordion │ │ │ ├── accordion-item │ │ │ │ └── index.ts │ │ │ └── index.ts │ │ ├── datetime │ │ │ ├── datetime.component.html │ │ │ ├── index.ts │ │ │ └── datetime.module.ts │ │ ├── dropdown │ │ │ ├── option │ │ │ │ └── option.component.scss │ │ │ ├── separator │ │ │ │ ├── separator.component.scss │ │ │ │ └── separator.component.ts │ │ │ ├── index.ts │ │ │ ├── dropdown.component.html │ │ │ ├── option-header │ │ │ │ ├── option-header.component.scss │ │ │ │ └── option-header.component.ts │ │ │ └── dropdown.component.scss │ │ ├── focusable │ │ │ ├── index.ts │ │ │ └── focusable.module.ts │ │ ├── avatar-pile │ │ │ ├── index.ts │ │ │ └── avatar-pile.module.ts │ │ ├── date-picker │ │ │ ├── index.ts │ │ │ └── date-picker.module.ts │ │ ├── expander │ │ │ ├── expander.component.scss │ │ │ ├── index.ts │ │ │ ├── expander.directive.ts │ │ │ └── expander.module.ts │ │ ├── tabs │ │ │ ├── index.ts │ │ │ ├── tabs-list.component.html │ │ │ ├── tab-item.component.html │ │ │ └── tabs.module.ts │ │ ├── toast │ │ │ ├── index.ts │ │ │ ├── toast.model.ts │ │ │ ├── toast.module.ts │ │ │ └── toast.component.scss │ │ ├── avatar │ │ │ ├── index.ts │ │ │ ├── avatar.model.ts │ │ │ ├── avatar.module.ts │ │ │ └── avatar.component.html │ │ ├── scroll │ │ │ ├── index.ts │ │ │ ├── infinite-scroll │ │ │ │ ├── infinite-scroll.component.html │ │ │ │ ├── infinite-scroll.component.scss │ │ │ │ └── infinite-scroll.component.spec.ts │ │ │ └── scroll.module.ts │ │ ├── icon │ │ │ ├── icon.component.html │ │ │ ├── index.ts │ │ │ ├── icon.model.ts │ │ │ ├── svg-loader.interface.ts │ │ │ ├── svg-loader.ts │ │ │ └── icon.module.ts │ │ ├── tooltip │ │ │ ├── index.ts │ │ │ ├── tooltip.component.html │ │ │ └── tooltip.module.ts │ │ ├── table │ │ │ ├── table-row-header │ │ │ │ ├── table-row-header.component.html │ │ │ │ └── table-row-header.component.ts │ │ │ ├── table-sortable-header │ │ │ │ └── table-sortable-header.component.scss │ │ │ ├── table-row │ │ │ │ ├── table-row.component.html │ │ │ │ └── table-row.component.ts │ │ │ ├── table-cell-menu │ │ │ │ ├── table-cell-menu.component.html │ │ │ │ └── table-cell-menu.component.ts │ │ │ ├── table-cell │ │ │ │ ├── table-cell.component.html │ │ │ │ └── table-cell.component.ts │ │ │ ├── table.component.html │ │ │ ├── table-lead-cell-multi-line │ │ │ │ ├── table-lead-cell-multi-line.component.html │ │ │ │ ├── table-lead-cell-multi-line.component.scss │ │ │ │ └── table-lead-cell-multi-line.component.ts │ │ │ ├── table-sortable-header-cell │ │ │ │ └── table-sortable-header-cell.component.html │ │ │ ├── index.ts │ │ │ ├── table.models.ts │ │ │ └── table.directives.ts │ │ ├── side-nav │ │ │ ├── index.ts │ │ │ ├── side-nav-item │ │ │ │ ├── side-nav-item.component.html │ │ │ │ └── side-nav-item.component.ts │ │ │ ├── side-nav.directive.ts │ │ │ └── side-nav.component.html │ │ ├── popup │ │ │ ├── popup.component.html │ │ │ ├── popover │ │ │ │ └── popover.component.html │ │ │ ├── index.ts │ │ │ ├── popup.service.ts │ │ │ └── popup.module.ts │ │ ├── translate │ │ │ ├── index.ts │ │ │ ├── translate.model.ts │ │ │ └── i18n │ │ │ │ └── en.ts │ │ ├── chips │ │ │ ├── index.ts │ │ │ ├── chip │ │ │ │ ├── chip.component.ts │ │ │ │ └── chip.component.html │ │ │ ├── base-chip.ts │ │ │ ├── chip-closeable │ │ │ │ └── chip-closeable.component.ts │ │ │ ├── chip-selectionable │ │ │ │ └── chip-selectionable.component.ts │ │ │ └── chip-expandable │ │ │ │ └── chip-expandable.component.ts │ │ └── modal │ │ │ ├── index.ts │ │ │ ├── confirmation-dialog │ │ │ └── confirmation-dialog.component.ts │ │ │ └── modal.directive.ts │ ├── styles │ │ ├── theme │ │ │ ├── _tooltip.tokens.scss │ │ │ ├── _icon.tokens.scss │ │ │ ├── _popover.tokens.scss │ │ │ ├── _z-index.tokens.scss │ │ │ ├── _card.tokens.scss │ │ │ ├── _avatar.tokens.scss │ │ │ ├── _scrollbar.tokens.scss │ │ │ └── _chips.tokens.scss │ │ ├── components │ │ │ ├── _focus.scss │ │ │ ├── _popup.scss │ │ │ ├── _icons.scss │ │ │ └── _card.scss │ │ ├── _utils.scss │ │ └── _core.scss │ ├── assets │ │ └── fonts │ │ │ └── Poppins │ │ │ ├── Poppins-Black.ttf │ │ │ ├── Poppins-Bold.ttf │ │ │ ├── Poppins-Bold.woff │ │ │ ├── Poppins-Light.ttf │ │ │ ├── Poppins-Thin.ttf │ │ │ ├── Poppins-Thin.woff │ │ │ ├── Poppins-Black.woff │ │ │ ├── Poppins-Black.woff2 │ │ │ ├── Poppins-Bold.woff2 │ │ │ ├── Poppins-Italic.ttf │ │ │ ├── Poppins-Italic.woff │ │ │ ├── Poppins-Italic.woff2 │ │ │ ├── Poppins-Light.woff │ │ │ ├── Poppins-Light.woff2 │ │ │ ├── Poppins-Medium.ttf │ │ │ ├── Poppins-Medium.woff │ │ │ ├── Poppins-Medium.woff2 │ │ │ ├── Poppins-Regular.ttf │ │ │ ├── Poppins-Regular.woff │ │ │ ├── Poppins-SemiBold.ttf │ │ │ ├── Poppins-Thin.woff2 │ │ │ ├── Poppins-BoldItalic.ttf │ │ │ ├── Poppins-ExtraBold.ttf │ │ │ ├── Poppins-ExtraBold.woff │ │ │ ├── Poppins-ExtraLight.ttf │ │ │ ├── Poppins-Regular.woff2 │ │ │ ├── Poppins-SemiBold.woff │ │ │ ├── Poppins-SemiBold.woff2 │ │ │ ├── Poppins-ThinItalic.ttf │ │ │ ├── Poppins-BlackItalic.ttf │ │ │ ├── Poppins-BlackItalic.woff │ │ │ ├── Poppins-BlackItalic.woff2 │ │ │ ├── Poppins-BoldItalic.woff │ │ │ ├── Poppins-BoldItalic.woff2 │ │ │ ├── Poppins-ExtraBold.woff2 │ │ │ ├── Poppins-ExtraLight.woff │ │ │ ├── Poppins-ExtraLight.woff2 │ │ │ ├── Poppins-LightItalic.ttf │ │ │ ├── Poppins-LightItalic.woff │ │ │ ├── Poppins-LightItalic.woff2 │ │ │ ├── Poppins-MediumItalic.ttf │ │ │ ├── Poppins-MediumItalic.woff │ │ │ ├── Poppins-ThinItalic.woff │ │ │ ├── Poppins-ThinItalic.woff2 │ │ │ ├── Poppins-ExtraBoldItalic.ttf │ │ │ ├── Poppins-MediumItalic.woff2 │ │ │ ├── Poppins-SemiBoldItalic.ttf │ │ │ ├── Poppins-SemiBoldItalic.woff │ │ │ ├── Poppins-ExtraBoldItalic.woff │ │ │ ├── Poppins-ExtraBoldItalic.woff2 │ │ │ ├── Poppins-ExtraLightItalic.ttf │ │ │ ├── Poppins-ExtraLightItalic.woff │ │ │ ├── Poppins-ExtraLightItalic.woff2 │ │ │ └── Poppins-SemiBoldItalic.woff2 │ └── glyphs │ │ ├── dash.svg │ │ ├── plus.svg │ │ ├── text.svg │ │ ├── merged.svg │ │ ├── background.svg │ │ ├── columns.svg │ │ ├── foreground.svg │ │ ├── folder.svg │ │ ├── arrow-topright.svg │ │ ├── calendar.svg │ │ ├── italic.svg │ │ ├── page.svg │ │ ├── footer.svg │ │ ├── table.svg │ │ ├── video.svg │ │ ├── menu.svg │ │ ├── toc.svg │ │ ├── align-center.svg │ │ ├── align-left.svg │ │ ├── align-right.svg │ │ ├── archive.svg │ │ ├── mail.svg │ │ ├── arrow-right.svg │ │ ├── checkbox.svg │ │ ├── chevron-left.svg │ │ ├── chevron-up.svg │ │ ├── mandatory.svg │ │ ├── chevron-down.svg │ │ ├── chevron-right.svg │ │ ├── radiobutton.svg │ │ ├── subtitle.svg │ │ ├── title.svg │ │ ├── arrow-down.svg │ │ ├── copy.svg │ │ ├── arrow-left.svg │ │ ├── arrow-up.svg │ │ ├── paste.svg │ │ ├── warning.svg │ │ ├── image-fit.svg │ │ ├── highlight.svg │ │ ├── paragraph.svg │ │ ├── cross.svg │ │ ├── home.svg │ │ ├── rename.svg │ │ ├── collection.svg │ │ ├── row-delete.svg │ │ ├── column-delete.svg │ │ ├── image-right.svg │ │ ├── image-left.svg │ │ ├── news.svg │ │ ├── security.svg │ │ ├── leading.svg │ │ ├── play.svg │ │ ├── spacer.svg │ │ ├── thumbnails.svg │ │ ├── search.svg │ │ ├── link.svg │ │ ├── trash.svg │ │ ├── pause.svg │ │ ├── image-full.svg │ │ ├── attachment.svg │ │ ├── fullscreen.svg │ │ ├── image.svg │ │ ├── windowed.svg │ │ ├── code.svg │ │ ├── pencil.svg │ │ ├── undo.svg │ │ ├── slider.svg │ │ ├── filter.svg │ │ ├── review.svg │ │ ├── redo.svg │ │ ├── row-after.svg │ │ ├── out.svg │ │ ├── row-before.svg │ │ ├── column-after.svg │ │ ├── column-before.svg │ │ ├── language.svg │ │ ├── edit.svg │ │ ├── leading-image.svg │ │ ├── info.svg │ │ ├── map.svg │ │ ├── discussion.svg │ │ ├── bold.svg │ │ ├── upload.svg │ │ ├── reverse.svg │ │ ├── list.svg │ │ ├── history.svg │ │ ├── automated-content.svg │ │ ├── state.svg │ │ ├── more-horizontal.svg │ │ ├── properties.svg │ │ ├── navigation.svg │ │ ├── tag.svg │ │ ├── draggable.svg │ │ └── quotes.svg │ ├── global-setup.js │ ├── jest.lib.config.js │ ├── ng-package.json │ ├── tsconfig.lib.prod.json │ ├── tsconfig.spec.json │ └── tsconfig.lib.json ├── .prettierignore ├── src └── standalone-css.scss ├── jest.base.config.js ├── .prettierrc ├── .editorconfig ├── scripts ├── build.sh └── generate-sprite.py ├── tag-version.sh ├── .github └── workflows │ ├── ci.yml │ ├── ghpages.yml │ └── tag.yml ├── .run └── All Pastanaga.run.xml ├── ghpages.sh └── test-config.helper.ts /projects/demo/src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/demo/src/app/welcome-page/welcome-page.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /coverage 3 | .angular 4 | .github 5 | .run 6 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/sidenav-page/sidenav-page.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './public-api'; 2 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/container-page/container-page.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/demo/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './assets'; 2 | export * from './app/demo'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/card/card.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/textfield/typeahead-select/typeahead-select.component.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/demo/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/breakpoint-observer/index.ts: -------------------------------------------------------------------------------- 1 | export * from './breakpoint.observer'; 2 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/button/button.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: inline-block; 3 | } 4 | -------------------------------------------------------------------------------- /projects/demo/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /projects/demo/src/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/demo/src/favicon.png -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/accordion/accordion-item/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordion-item.component'; 2 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/card/index.ts: -------------------------------------------------------------------------------- 1 | export * from './card.component'; 2 | export * from './card.module'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './button.component'; 2 | export * from './button.module'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/global-setup.js: -------------------------------------------------------------------------------- 1 | module.exports = async () => { 2 | process.env.TZ = 'America/New_York'; 3 | }; 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordion.component'; 2 | export * from './accordion-item'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/slider/index.ts: -------------------------------------------------------------------------------- 1 | export * from './slider.component'; 2 | export * from './slider.module'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/datetime/datetime.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/dropdown/option/option.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: block; 3 | position: relative; 4 | } 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/focusable/index.ts: -------------------------------------------------------------------------------- 1 | export * from './focusable.directive'; 2 | export * from './focusable.module'; 3 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scroll-pages/infinite-scroll-page.component.scss: -------------------------------------------------------------------------------- 1 | pa-demo-data-card { 2 | margin: 0 !important; 3 | } 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/avatar-pile/index.ts: -------------------------------------------------------------------------------- 1 | export * from './avatar-pile.component'; 2 | export * from './avatar-pile.module'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/date-picker/index.ts: -------------------------------------------------------------------------------- 1 | export * from './date-picker.component'; 2 | export * from './date-picker.module'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/textfield/input/input.component.scss: -------------------------------------------------------------------------------- 1 | @use '@angular/cdk'; 2 | 3 | @include cdk.text-field-autofill(); 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/expander/expander.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../styles/variables' as *; 2 | 3 | :host { 4 | display: block; 5 | } 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/theme/_tooltip.tokens.scss: -------------------------------------------------------------------------------- 1 | @use 'shadows.tokens'; 2 | 3 | $shadow-tooltip: shadows.$shadow-default !default; 4 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/accordion-page/index.ts: -------------------------------------------------------------------------------- 1 | export * from './accordion-page.component'; 2 | export * from './accordion-item-page.component'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/jest.lib.config.js: -------------------------------------------------------------------------------- 1 | const baseConfig = require('../../jest.base.config'); 2 | 3 | module.exports = { 4 | ...baseConfig 5 | }; 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tab-item.component'; 2 | export * from './tabs.module'; 3 | export * from './tabs-list.component'; 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/textfield/select/index.ts: -------------------------------------------------------------------------------- 1 | export * from './select.component'; 2 | export * from './select-options/select-options.component'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/textfield/textarea/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pa-textarea-auto-height.directive'; 2 | export * from './textarea.component'; 3 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/datetime/index.ts: -------------------------------------------------------------------------------- 1 | export * from './datetime.component'; 2 | export * from './datetime.module'; 3 | export * from './datetime.service'; 4 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/translate-page/translate-page.component.scss: -------------------------------------------------------------------------------- 1 | section { 2 | margin-bottom: 24px; 3 | 4 | p { 5 | margin-bottom: 4px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/expander/index.ts: -------------------------------------------------------------------------------- 1 | export * from './expander.component'; 2 | export * from './expander.directive'; 3 | export * from './expander.module'; 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Black.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Bold.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Bold.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Light.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Thin.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Thin.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/toast/index.ts: -------------------------------------------------------------------------------- 1 | export * from './toast.component'; 2 | export * from './toast.model'; 3 | export * from './toast.module'; 4 | export * from './toast.service'; 5 | -------------------------------------------------------------------------------- /projects/demo/src/assets/index.ts: -------------------------------------------------------------------------------- 1 | export * from './i18n/custom-en'; 2 | export * from './i18n/custom-fr'; 3 | export * from './i18n/en'; 4 | export * from './i18n/fr'; 5 | export * from './i18n/la'; 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Black.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Black.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Black.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Black.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Bold.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Italic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Italic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Italic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Light.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Light.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Medium.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Medium.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Medium.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Regular.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Regular.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBold.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Thin.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './avatar.component'; 2 | export * from './avatar.model'; 3 | export * from './avatar.module'; 4 | export * from './avatar.utils'; 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BoldItalic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBold.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBold.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLight.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-Regular.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBold.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBold.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ThinItalic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/scroll/index.ts: -------------------------------------------------------------------------------- 1 | export * from './infinite-scroll/infinite-scroll.component'; 2 | export * from './scroll.module'; 3 | export * from './scrollabe-container.directive'; 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BlackItalic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BlackItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BlackItalic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BlackItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BlackItalic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BoldItalic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-BoldItalic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBold.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLight.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLight.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-LightItalic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-LightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-LightItalic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-LightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-LightItalic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-MediumItalic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-MediumItalic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ThinItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ThinItalic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ThinItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ThinItalic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-MediumItalic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBoldItalic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/form-field/index.ts: -------------------------------------------------------------------------------- 1 | export * from './form-field.module'; 2 | export * from './form-field-hint/form-field-hint.component'; 3 | export * from './pa-form-control.directive'; 4 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/modal-page/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dialog-example/dialog-example.component'; 2 | export * from './modal-example/modal-example.component'; 3 | export * from './modal-page.component'; 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBoldItalic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraBoldItalic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLightItalic.woff -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-ExtraLightItalic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plone/pastanaga-angular/HEAD/projects/pastanaga-angular/src/assets/fonts/Poppins/Poppins-SemiBoldItalic.woff2 -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/icon/icon.component.html: -------------------------------------------------------------------------------- 1 | @if (!!_name) { 2 | 5 | 6 | 7 | } 8 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ellipsis-tooltip.directive'; 2 | export * from './tooltip.component'; 3 | export * from './tooltip.directive'; 4 | export * from './tooltip.module'; 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/dash.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/dropdown/separator/separator.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../styles/theme/menu.tokens' as menu; 2 | 3 | .pa-separator { 4 | border-bottom: 1px solid menu.$color-border-menu-separator; 5 | } 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from './icon.component'; 2 | export * from './icon.model'; 3 | export * from './icon.module'; 4 | export * from './svg-loader.interface'; 5 | export * from './svg-loader'; 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-row-header/table-row-header.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/side-nav/index.ts: -------------------------------------------------------------------------------- 1 | export * from './side-nav.component'; 2 | export * from './side-nav.directive'; 3 | export * from './side-nav.module'; 4 | export * from './side-nav-item/side-nav-item.component'; 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/merged.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-sortable-header/table-sortable-header.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: contents; 3 | 4 | .pa-sortable-header-container { 5 | display: contents; 6 | position: relative; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/background.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/popup/popup.component.html: -------------------------------------------------------------------------------- 1 |
5 |
6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/icon/icon.model.ts: -------------------------------------------------------------------------------- 1 | import { Size } from '../common'; 2 | 3 | export interface IconModel { 4 | name?: string; 5 | path?: string; 6 | size?: Size; 7 | color?: string; 8 | background?: string; 9 | } 10 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/components/_focus.scss: -------------------------------------------------------------------------------- 1 | @use '../theme/shadows.tokens' as shadows; 2 | 3 | .pa-no-browser-accessibility-styling:focus { 4 | outline: 0; 5 | } 6 | .pa-keyboard-focus { 7 | box-shadow: shadows.$shadow-focus; 8 | } 9 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/confirmation-dialog-page/confirmation-dialog-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 2 | 3 | .open-modal-button { 4 | margin-bottom: spacing.rhythm(1); 5 | } 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/columns.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/foreground.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/popup/popover/popover.component.html: -------------------------------------------------------------------------------- 1 |
5 |
6 | 7 |
8 |
9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/scroll/infinite-scroll/infinite-scroll.component.html: -------------------------------------------------------------------------------- 1 | 2 |
6 |
9 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/form-control-page/value-example/form-control-value-example.component.scss: -------------------------------------------------------------------------------- 1 | .example { 2 | display: flex; 3 | border: 1px solid; 4 | height: 2rem; 5 | width: 100%; 6 | } 7 | button { 8 | margin: 1rem 1rem 1rem 0; 9 | } 10 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/arrow-topright.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/icon/svg-loader.interface.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs'; 2 | import { Renderer2 } from '@angular/core'; 3 | 4 | export interface SvgLoaderInterface { 5 | loadSvgFromSsr(iconPath: string, renderer: Renderer2): Observable; 6 | } 7 | -------------------------------------------------------------------------------- /projects/demo/src/assets/i18n/custom-en.ts: -------------------------------------------------------------------------------- 1 | import { TranslationEntries } from '@guillotinaweb/pastanaga-angular'; 2 | 3 | export const CUSTOM_EN: TranslationEntries = { 4 | other: { 5 | test: "That's a test", 6 | }, 7 | common: { 8 | yes: 'Yeah', 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /projects/demo/src/assets/i18n/custom-fr.ts: -------------------------------------------------------------------------------- 1 | import { TranslationEntries } from '@guillotinaweb/pastanaga-angular'; 2 | 3 | export const CUSTOM_FR: TranslationEntries = { 4 | other: { 5 | test: "C'est un test", 6 | }, 7 | common: { 8 | yes: 'Ouais', 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/toggles/index.ts: -------------------------------------------------------------------------------- 1 | export * from './checkbox/checkbox.component'; 2 | export * from './radio/radio-group.directive'; 3 | export * from './radio/radio.component'; 4 | export * from './toggle/toggle.component'; 5 | export * from './toggles.module'; 6 | -------------------------------------------------------------------------------- /src/standalone-css.scss: -------------------------------------------------------------------------------- 1 | @use '../projects/pastanaga-angular/src/styles/core' as *; 2 | @use '../projects/pastanaga-angular/src/styles/grid' as *; 3 | @use '../projects/pastanaga-angular/src/styles/theme/fonts' as *; 4 | @use '../projects/pastanaga-angular/src/styles/cssvariables' as *; 5 | -------------------------------------------------------------------------------- /jest.base.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | globalSetup: '/global-setup.js', 3 | moduleNameMapper: { 4 | '@core/(.*)': '/src/app/core/$1', 5 | }, 6 | preset: 'jest-preset-angular', 7 | setupFilesAfterEnv: ['/../../setup-jest.ts'], 8 | }; 9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/italic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/page.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/dropdown/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dropdown.component'; 2 | export * from './dropdown.module'; 3 | export * from './option/option.component'; 4 | export * from './option-header/option-header.component'; 5 | export * from './separator/separator.component'; 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/popup/index.ts: -------------------------------------------------------------------------------- 1 | export * from './popover/popover.component'; 2 | export * from './popover/popover.directive'; 3 | export * from './popup.component'; 4 | export * from './popup.directive'; 5 | export * from './popup.module'; 6 | export * from './popup.service'; 7 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/grid-page/grid-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'grid-page.component.html', 5 | styleUrls: ['./grid-page.component.scss'], 6 | standalone: false, 7 | }) 8 | export class GridPageComponent {} 9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/table.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/index.ts: -------------------------------------------------------------------------------- 1 | export * from './control.model'; 2 | export * from './form-field.model'; 3 | export * from './form-field.utils'; 4 | 5 | export * from './form-field'; 6 | export * from './textfield'; 7 | export * from './toggles'; 8 | export * from './slider'; 9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/theme/_icon.tokens.scss: -------------------------------------------------------------------------------- 1 | @use 'spacing.tokens'; 2 | 3 | $size-icon-small: spacing.rhythm(2); 4 | $size-icon-medium: spacing.rhythm(3); 5 | $size-icon-large: spacing.rhythm(4); 6 | $size-icon-xlarge: spacing.rhythm(5); 7 | $size-icon-xxlarge: spacing.rhythm(6); 8 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/chip-page/chip-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 2 | 3 | .chip-container { 4 | display: flex; 5 | flex-wrap: wrap; 6 | gap: spacing.rhythm(1); 7 | margin-bottom: spacing.rhythm(2); 8 | } 9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/palette-page/palette-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'palette-page.component.html', 5 | styleUrls: ['palette-page.component.scss'], 6 | standalone: false, 7 | }) 8 | export class PalettePageComponent {} 9 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scroll-pages/index.ts: -------------------------------------------------------------------------------- 1 | export * from './data-card/data-card.component'; 2 | export * from './data_1189'; 3 | export * from './infinite-scroll-demo/infinite-scroll-demo.component'; 4 | export * from './infinite-scroll-page.component'; 5 | export * from './scroll-page.service'; 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/pastanaga-angular", 4 | "lib": { 5 | "entryFile": "src/public-api.ts", 6 | "styleIncludePaths": [ 7 | "../../src" 8 | ] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/tooltip/tooltip.component.html: -------------------------------------------------------------------------------- 1 | @if (text) { 2 | 9 | {{ text }} 10 | 11 | } 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/toc.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/theme/_popover.tokens.scss: -------------------------------------------------------------------------------- 1 | @use 'palette.tokens'; 2 | @use 'spacing.tokens'; 3 | 4 | $color-background-popover: palette.$color-dark-stronger !default; 5 | $color-text-popover: palette.$color-light-stronger !default; 6 | 7 | $size-arrow-popover: spacing.rhythm(1.5) !default; 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "useTabs": false, 5 | "tabWidth": 2, 6 | "bracketSpacing": true, 7 | "trailingComma": "all", 8 | "bracketSameLine": true, 9 | "singleAttributePerLine": true, 10 | "htmlWhitespaceSensitivity": "ignore" 11 | } 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/form-field/form-field-hint/form-field-hint.component.html: -------------------------------------------------------------------------------- 1 | @if (hint) { 2 | 8 | } 9 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/distribute-page/distribute-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: 'distribute-page.component.html', 5 | styleUrls: ['distribute-page.component.scss'], 6 | standalone: false, 7 | }) 8 | export class DistributePageComponent {} 9 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/form-control-page/state-example/form-control-state-example.component.scss: -------------------------------------------------------------------------------- 1 | div { 2 | display: flex; 3 | margin-bottom: 1rem; 4 | border: 1px solid; 5 | height: 2rem; 6 | align-items: center; 7 | padding-left: 1rem; 8 | } 9 | button { 10 | margin-right: 1rem; 11 | } 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/align-center.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/align-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/align-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/archive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/translate/index.ts: -------------------------------------------------------------------------------- 1 | export * from './i18n/en'; 2 | export * from './translate.directive'; 3 | export * from './translate.model'; 4 | export * from './translate.module'; 5 | export * from './translate.pipe'; 6 | export * from './translate.service'; 7 | export * from './translate.utils'; 8 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/checkbox.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/chevron-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/chevron-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/mandatory.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/card/card.component.html: -------------------------------------------------------------------------------- 1 |
7 |
8 | 9 |
10 |
11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/modal-page/modal-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 2 | 3 | .open-modal-button { 4 | margin-bottom: spacing.rhythm(1); 5 | } 6 | 7 | .nested { 8 | list-style: none; 9 | margin-bottom: spacing.rhythm(1); 10 | } 11 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/radiobutton.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/subtitle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/demo/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | }; 8 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/title.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/avatar/avatar.model.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs'; 2 | 3 | export interface AvatarModel { 4 | userId?: string; 5 | userName?: string; 6 | image?: Observable; 7 | imageSrc?: string; 8 | autoBackground?: boolean; 9 | size?: 'tiny' | 'small' | 'medium' | 'huge'; 10 | } 11 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-row/table-row.component.html: -------------------------------------------------------------------------------- 1 |
8 | 9 |
10 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/form-control-page/name-example/form-control-name-example.component.scss: -------------------------------------------------------------------------------- 1 | form { 2 | display: flex; 3 | flex-direction: column; 4 | margin-bottom: 2rem; 5 | border: 1px solid; 6 | padding: 1rem; 7 | span, 8 | input, 9 | div { 10 | display: flex; 11 | flex: 1; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/radio-page/radio-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 2 | 3 | .examples, 4 | form { 5 | display: flex; 6 | flex-direction: column; 7 | gap: spacing.rhythm(1); 8 | } 9 | 10 | hr { 11 | margin: spacing.rhythm(2) 0; 12 | } 13 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/copy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/datetime/datetime.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | 3 | import { DateTimeComponent } from './datetime.component'; 4 | 5 | @NgModule({ 6 | imports: [], 7 | exports: [DateTimeComponent], 8 | declarations: [DateTimeComponent], 9 | }) 10 | export class PaDateTimeModule {} 11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/form-control-page/usage/pa-form-control-usage.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-pa-form-control-usage', 5 | templateUrl: './pa-form-control-usage.component.html', 6 | standalone: false, 7 | }) 8 | export class PaFormControlUsageComponent {} 9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/paste.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/image-fit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/scroll/infinite-scroll/infinite-scroll.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../styles/theme/spacing.tokens' as spacing; 2 | 3 | :host { 4 | display: block; 5 | position: relative; 6 | padding-bottom: spacing.rhythm(10); 7 | } 8 | .pa-infinite-scroll-mid-anchor { 9 | position: absolute; 10 | top: 50%; 11 | } 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/chips/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base-chip'; 2 | export * from './chips.module'; 3 | export * from './chip/chip.component'; 4 | export * from './chip-closeable/chip-closeable.component'; 5 | export * from './chip-expandable/chip-expandable.component'; 6 | export * from './chip-selectionable/chip-selectionable.component'; 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/highlight.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/paragraph.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/_utils.scss: -------------------------------------------------------------------------------- 1 | // Compute the width of an element display in a flex column depending on the number of columns ($colCount) 2 | // and the size of the gap between two columns ($col-gap). 3 | @function flexColumnWidth($colCount, $col-gap) { 4 | @return calc((100% / #{$colCount}) - #{$col-gap} * #{$colCount - 1}/#{$colCount}); 5 | } 6 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scroll-pages/data-card/data-card.component.html: -------------------------------------------------------------------------------- 1 | @if (!!data) { 2 |
3 |

{{ data.index }}. {{ data.name }}

4 |
{{ data.about }}
5 |
6 | {{ data.email }} 7 | {{ data.phone }} 8 |
9 |
10 | } 11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/expand-page/expander-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 3 | 4 | hr { 5 | margin: spacing.rhythm(4) 0; 6 | border: none; 7 | border-top: 1px solid palette.$color-neutral-lighter; 8 | } 9 | -------------------------------------------------------------------------------- /projects/demo/src/app/welcome-page/welcome-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './welcome-page.component.html', 5 | styleUrls: ['./welcome-page.component.scss'], 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class WelcomePageComponent {} 10 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/dropdown/dropdown.component.html: -------------------------------------------------------------------------------- 1 |
5 |
8 |
    11 | 12 |
13 |
14 |
15 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/theme/_z-index.tokens.scss: -------------------------------------------------------------------------------- 1 | $z-index-tooltip: 1200 !default; 2 | $z-index-alert: 1000 !default; 3 | $z-index-toast: 800 !default; 4 | $z-index-modal: 600 !default; 5 | $z-index-modal-backdrop: 590 !default; 6 | $z-index-popup: 400 !default; 7 | $z-index-default: 1 !default; 8 | $z-index-background: -50 !default; 9 | $z-index-deepdive: -100 !default; 10 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/button-page/button-usage/button-usage.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-button-usage', 5 | templateUrl: './button-usage.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class ButtonUsageComponent {} 10 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-cell-menu/table-cell-menu.component.html: -------------------------------------------------------------------------------- 1 |
9 | 10 |
11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/form-control-page/validation-example/form-control-validation-example.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | flex-direction: column; 4 | input, 5 | div, 6 | span { 7 | margin-bottom: 1rem; 8 | } 9 | .example, 10 | input { 11 | border: 1px solid; 12 | height: 2rem; 13 | } 14 | button { 15 | margin-bottom: 1rem; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/tabs/tabs-list.component.html: -------------------------------------------------------------------------------- 1 |
    6 | 7 | 8 | @if (!noSlider) { 9 | 13 | } 14 |
15 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/chips/chip/chip.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { BaseChip } from '../base-chip'; 3 | 4 | @Component({ 5 | selector: 'pa-chip', 6 | templateUrl: './chip.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class ChipComponent extends BaseChip {} 11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/common-doc/base-control/base-control-usage.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-base-control-usage', 5 | templateUrl: './base-control-usage.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class BaseControlUsageComponent {} 10 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/ellipsis-tooltip-page/ellipsis-tooltip-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 3 | 4 | .example-container { 5 | background-color: palette.$color-tertiary-lighter; 6 | padding: spacing.rhythm(1); 7 | width: spacing.rhythm(32); 8 | } 9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/rename.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/side-nav/side-nav-item/side-nav-item.component.html: -------------------------------------------------------------------------------- 1 |
  • 7 | @if (header) { 8 |

    9 | {{ label }} 10 |

    11 | } 12 | @if (!header) { 13 | {{ label }} 14 | } 15 |
    • 16 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/tabs/tab-item.component.html: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/translate/translate.model.ts: -------------------------------------------------------------------------------- 1 | export interface FlattenTranslationEntries { 2 | [id: string]: string; 3 | } 4 | export interface TranslationEntries { 5 | [id: string]: string | TranslationEntries; 6 | } 7 | 8 | export interface Translation { 9 | [lang: string]: TranslationEntries; 10 | } 11 | 12 | export interface FlattenTranslation { 13 | [lang: string]: FlattenTranslationEntries; 14 | } 15 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/popup-page/popup-component-usage/popup-component-usage.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-popup-component-usage', 5 | templateUrl: './popup-component-usage.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class PopupComponentUsageComponent {} 10 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/card/card.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { CardComponent } from './card.component'; 4 | import { PaFocusableModule } from '../focusable'; 5 | 6 | @NgModule({ 7 | declarations: [CardComponent], 8 | exports: [CardComponent], 9 | imports: [CommonModule, PaFocusableModule], 10 | }) 11 | export class PaCardModule {} 12 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/demo.component.html: -------------------------------------------------------------------------------- 1 |
    4 |
    5 | @if (mode$ | async; as mode) { 6 | 10 | } 11 |
    12 |
    13 | 14 |
    15 |
    16 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/collection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base-modal.component'; 2 | 3 | export * from './confirmation-dialog/confirmation-dialog.component'; 4 | export * from './modal-advanced/modal-advanced.component'; 5 | export * from './modal-dialog/modal-dialog.component'; 6 | 7 | export * from './modal.directive'; 8 | export * from './modal.model'; 9 | export * from './modal.module'; 10 | export * from './modal.service'; 11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/form-control-page/form-control-page.component.scss: -------------------------------------------------------------------------------- 1 | pa-demo-examples > ul { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | li { 6 | &:hover { 7 | cursor: pointer; 8 | h3 { 9 | text-decoration: underline; 10 | } 11 | } 12 | } 13 | } 14 | 15 | .pa-select-chevron { 16 | display: inline-block; 17 | &.opened { 18 | transform: rotate(180deg); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/row-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/avatar/avatar.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { AvatarComponent } from './avatar.component'; 4 | import { PaTooltipModule } from '../tooltip'; 5 | 6 | @NgModule({ 7 | declarations: [AvatarComponent], 8 | exports: [AvatarComponent], 9 | imports: [CommonModule, PaTooltipModule], 10 | }) 11 | export class PaAvatarModule {} 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/toast/toast.model.ts: -------------------------------------------------------------------------------- 1 | export interface ToastButton { 2 | label?: string; 3 | icon?: string; 4 | action: () => any; 5 | } 6 | 7 | export interface ToastConfig { 8 | autoClose?: boolean; 9 | button?: ToastButton; 10 | icon?: string; 11 | title?: string; 12 | translateParams?: { [key: string]: string | number }; 13 | } 14 | 15 | export type ToastType = 'info' | 'success' | 'warning' | 'error'; 16 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/table-page/common-table-description/common-table-description.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-common-table-description', 5 | templateUrl: './common-table-description.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class CommonTableDescriptionComponent {} 10 | -------------------------------------------------------------------------------- /projects/demo/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch((err) => console.error(err)); 14 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/column-delete.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/image-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /scripts/build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | set -e 3 | 4 | echo "Build Pastanaga library" 5 | ng build pastanaga-angular --configuration production 6 | 7 | echo "Copy README, LICENSE, styles and assets to dist/pastanaga-angular" 8 | cp ./README.md ./LICENSE.md ./dist/pastanaga-angular 9 | cp -r projects/pastanaga-angular/src/styles ./dist/pastanaga-angular/lib 10 | cp -r ./projects/pastanaga-angular/src/assets ./dist/pastanaga-angular 11 | 12 | echo "Done." 13 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/image-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/modal-page/modal-example/modal-example.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 3 | 4 | .content { 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | background: palette.$color-neutral-lightest; 9 | height: spacing.rhythm(40); 10 | } 11 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/news.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/security.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/focusable/focusable.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { A11yModule } from '@angular/cdk/a11y'; 4 | import { FocusableDirective } from './focusable.directive'; 5 | 6 | @NgModule({ 7 | imports: [CommonModule, A11yModule], 8 | exports: [FocusableDirective], 9 | declarations: [FocusableDirective], 10 | }) 11 | export class PaFocusableModule {} 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-cell/table-cell.component.html: -------------------------------------------------------------------------------- 1 |
    11 | 12 |
    13 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/avatar-page/avatar-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 2 | 3 | .avatar-row { 4 | display: flex; 5 | align-items: center; 6 | margin: spacing.rhythm(1) 0; 7 | 8 | & > div { 9 | width: spacing.rhythm(9); 10 | } 11 | & > * { 12 | margin-bottom: 0; 13 | margin-right: spacing.rhythm(1); 14 | min-width: spacing.rhythm(6); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-row-header/table-row-header.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-table-row-header', 5 | templateUrl: 'table-row-header.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | encapsulation: ViewEncapsulation.None, 8 | standalone: false, 9 | }) 10 | export class TableRowHeaderComponent {} 11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/accessibility/accessibility-page.component.html: -------------------------------------------------------------------------------- 1 | 2 | Accessibility 3 | 4 | 5 |

    6 | Elements which need to be invisible but should stay available for screen readers can use the `.pa-sr-only` class. 7 |

    8 |     9 | 10 | 11 | 
    {{code}}
    12 |     13 |     14 | -------------------------------------------------------------------------------- /projects/demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pastanaga Angular 6 | 7 | 10 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /projects/demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/app", 6 | "types": [], 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "files": [ 10 | "src/main.ts", 11 | "src/polyfills.ts" 12 | ], 13 | "include": [ 14 | "src/**/*.d.ts" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/input-page/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input-form-control-example/input-form-control-example.component'; 2 | export * from './input-form-group-example/input-form-group-example.component'; 3 | export * from './input-ng-model-example/input-ng-model-example.component'; 4 | export * from './pa-input-config/pa-input-config.component'; 5 | export * from './input-standalone-example/input-standalone-example.component'; 6 | export * from './input-page.component'; 7 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/dropdown/separator/separator.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-separator', 5 | template: ` 6 | 9 | `, 10 | styleUrls: ['separator.component.scss'], 11 | changeDetection: ChangeDetectionStrategy.OnPush, 12 | standalone: false, 13 | }) 14 | export class SeparatorComponent {} 15 | -------------------------------------------------------------------------------- /tag-version.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | git config --global user.email "github@github.com"; 4 | git config --global user.name "GitHub Actions"; 5 | export PACKAGE_VERSION=$(npm run get_version | tail -n 1); 6 | echo "PACKAGE VERSION: $PACKAGE_VERSION" 7 | echo "Search in existing… $(git tag -l "$PACKAGE_VERSION")" 8 | if ! [ $(git tag -l "$PACKAGE_VERSION") ]; then 9 | echo "TAGGING $PACKAGE_VERSION..."; 10 | git tag $PACKAGE_VERSION; 11 | git push --tags; 12 | fi -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/accessibility/accessibility-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-accessibility-page', 5 | templateUrl: './accessibility-page.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class AccessibilityPageComponent { 10 | code = `Go to main content`; 11 | } 12 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/native-text-field-page/usage/native-text-field-usage.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-native-text-field-usage', 5 | templateUrl: './native-text-field-usage.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class NativeTextFieldUsageComponent { 10 | @Input() native = false; 11 | } 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jest", 7 | "node" 8 | ], 9 | "module": "commonjs", 10 | "emitDecoratorMetadata": true, 11 | "allowJs": true 12 | }, 13 | "files": [], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v3 10 | - name: Test and build 11 | uses: actions/setup-node@v3 12 | with: 13 | node-version: 22 14 | - run: npm install 15 | - run: npm run test:ci && npm run build:demo 16 | env: 17 | CI: true 18 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/focusable-page/focusable-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './focusable-page.component.html', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | standalone: false, 7 | }) 8 | export class FocusablePageComponent { 9 | code = `
    Lorem Ipsum...
    10 |
    Disabled Lorem Ipsum...
    `; 11 | } 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/popup/popup.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Subject } from 'rxjs'; 3 | import { PositionStyle } from '../common'; 4 | 5 | @Injectable({ providedIn: 'root' }) 6 | export class PopupService { 7 | closeAllPopups: Subject = new Subject(); 8 | closeAllButId: Subject = new Subject(); 9 | closeAllSubMenu: Subject = new Subject(); 10 | lastPosition?: PositionStyle; 11 | } 12 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/select-page/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pa-select-config/pa-select-config.component'; 2 | export * from './select-form-control-example/select-form-control-example.component'; 3 | export * from './select-form-group-example/select-form-group-example.component'; 4 | export * from './select-ng-model-example/select-ng-model-example.component'; 5 | export * from './select-standalone-example/select-standalone-example.component'; 6 | export * from './select-page.component'; 7 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/textfield/index.ts: -------------------------------------------------------------------------------- 1 | export * from './input/input.component'; 2 | export * from './input-formatter.directive'; 3 | 4 | export * from './native-text-field.directive'; 5 | 6 | export * from './select'; 7 | 8 | export * from './textarea'; 9 | 10 | export * from './text-field.directive'; 11 | export * from './text-field.module'; 12 | export * from './text-field-utility.service'; 13 | 14 | export * from './typeahead-select/typeahead-select.component'; 15 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/grid-page/grid-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 3 | 4 | [class^='grid-'] > div { 5 | background-color: palette.$color-tertiary-regular; 6 | color: palette.$color-light-stronger; 7 | padding: spacing.rhythm(0.25); 8 | } 9 | 10 | pa-demo-examples code { 11 | margin: spacing.rhythm(1.5) 0; 12 | } 13 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/leading.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/spacer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-cell-menu/table-cell-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { TableCellComponent } from '../table-cell/table-cell.component'; 3 | 4 | @Component({ 5 | selector: 'pa-table-cell-menu', 6 | templateUrl: './table-cell-menu.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class TableCellMenuComponent extends TableCellComponent {} 11 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [], 10 | "lib": [ 11 | "dom", 12 | "es2020" 13 | ] 14 | }, 15 | "exclude": [ 16 | "src/test.ts", 17 | "**/*.spec.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/thumbnails.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/button/button.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ButtonComponent } from './button.component'; 4 | import { PaIconModule } from '../icon'; 5 | import { PaFocusableModule } from '../focusable'; 6 | 7 | @NgModule({ 8 | imports: [CommonModule, PaIconModule, PaFocusableModule], 9 | declarations: [ButtonComponent], 10 | exports: [ButtonComponent], 11 | }) 12 | export class PaButtonModule {} 13 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/text-area-page/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pa-textarea-config/pa-textarea-config.component'; 2 | export * from './textarea-form-control-example/textarea-form-control-example.component'; 3 | export * from './textarea-form-group-example/textarea-form-group-example.component'; 4 | export * from './textarea-ng-model-example/textarea-ng-model-example.component'; 5 | export * from './textarea-standalone-example/textarea-standalone-example.component'; 6 | export * from './textarea-page.component'; 7 | -------------------------------------------------------------------------------- /projects/demo/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ "jest", "node" ], 7 | "emitDecoratorMetadata": true 8 | }, 9 | "files": [ 10 | "src/test.ts", 11 | "src/polyfills.ts" 12 | ], 13 | "include": [ 14 | "src/**/*.spec.ts", 15 | "src/**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scroll-pages/data-card/data-card.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy, Input } from '@angular/core'; 2 | import { Data } from '../scroll-page.service'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-data-card', 6 | templateUrl: './data-card.component.html', 7 | styleUrls: ['./data-card.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false, 10 | }) 11 | export class DataCardComponent { 12 | @Input() data?: Data; 13 | } 14 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/icon/svg-loader.ts: -------------------------------------------------------------------------------- 1 | import { Observable, of } from 'rxjs'; 2 | import { SvgLoaderInterface } from './svg-loader.interface'; 3 | import { Injectable, Renderer2 } from '@angular/core'; 4 | 5 | @Injectable({ providedIn: 'root' }) 6 | export class SvgLoader implements SvgLoaderInterface { 7 | loadSvgFromSsr(iconPath: string, renderer: Renderer2): Observable { 8 | console.error('You must provide a SSR implementation'); 9 | return of({} as SVGElement); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/form-control-page/index.ts: -------------------------------------------------------------------------------- 1 | export * from './form-control-page.component'; 2 | export * from './id-example/form-control-id-example.component'; 3 | export * from './name-example/form-control-name-example.component'; 4 | export * from './state-example/form-control-state-example.component'; 5 | export * from './usage/pa-form-control-usage.component'; 6 | export * from './validation-example/form-control-validation-example.component'; 7 | export * from './value-example/form-control-value-example.component'; 8 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/modal-page/modal-example/modal-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { ModalRef } from '@guillotinaweb/pastanaga-angular'; 3 | 4 | @Component({ 5 | templateUrl: './modal-example.component.html', 6 | styleUrls: ['./modal-example.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class ModalExampleComponent { 11 | constructor(public modal: ModalRef) {} 12 | } 13 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/trash.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/avatar/avatar.component.html: -------------------------------------------------------------------------------- 1 | 5 | @if (base64Image) { 6 | avatar 10 | } @else { 11 | @if (!!initials || !!userId) { 12 | 13 | {{ initials }} 14 | 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/image-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/dropdown/option-header/option-header.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../styles/theme/body.tokens' as body; 2 | @use '../../../styles/theme/menu.tokens' as menu; 3 | @use '../../../styles/theme/typography.tokens' as typography; 4 | 5 | .pa-option-header { 6 | @include typography.size(xs); 7 | font-weight: body.$font-weight-menu-header; 8 | color: menu.$color-text-menu-option-header; 9 | padding: menu.$padding-menu-option-top menu.$padding-menu-option-side; 10 | text-transform: uppercase; 11 | } 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/toast/toast.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ToastComponent } from './toast.component'; 4 | import { PaButtonModule } from '../button'; 5 | import { PaIconModule } from '../icon'; 6 | import { PaTranslateModule } from '../translate'; 7 | 8 | @NgModule({ 9 | declarations: [ToastComponent], 10 | imports: [CommonModule, PaButtonModule, PaIconModule, PaTranslateModule], 11 | }) 12 | export class PaToastModule {} 13 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/attachment.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/fullscreen.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/expander/expander.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'pa-expander-header', 5 | standalone: false, 6 | }) 7 | export class ExpanderHeaderDirective {} 8 | 9 | @Directive({ 10 | selector: 'pa-expander-header-side-block', 11 | standalone: false, 12 | }) 13 | export class ExpanderHeaderSideBlockDirective {} 14 | 15 | @Directive({ 16 | selector: 'pa-expander-body', 17 | standalone: false, 18 | }) 19 | export class ExpanderBodyDirective {} 20 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/index.ts: -------------------------------------------------------------------------------- 1 | export * from './date-picker-form-control-example/date-picker-form-control-example.component'; 2 | export * from './date-picker-form-group-example/date-picker-form-group-example.component'; 3 | export * from './date-picker-ng-model-example/date-picker-ng-model-example.component'; 4 | export * from './date-picker-standalone-example/date-picker-standalone-example.component'; 5 | export * from './date-picker-page.component'; 6 | export * from './date-picker-config/date-picker-config.component'; 7 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/windowed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/dropdown/option-header/option-header.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-option-header', 5 | template: ` 6 | 11 | `, 12 | styleUrls: ['./option-header.component.scss'], 13 | changeDetection: ChangeDetectionStrategy.OnPush, 14 | standalone: false, 15 | }) 16 | export class OptionHeaderComponent {} 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/pencil.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/tabs-page/tabs-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/variables' as *; 2 | 3 | .tab-example-container { 4 | --tab-parent-background: transparent; 5 | --tab-parent-padding: 0; 6 | --tab-content-background: transparent; 7 | --tab-content-padding: 1rem 0; 8 | 9 | background-color: var(--tab-parent-background); 10 | padding: var(--tab-parent-padding); 11 | } 12 | 13 | .tab-content { 14 | background-color: var(--tab-content-background); 15 | padding: var(--tab-content-padding); 16 | } 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/undo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/scroll/scroll.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { InfiniteScrollComponent } from './infinite-scroll/infinite-scroll.component'; 4 | import { ScrollableContainerDirective } from './scrollabe-container.directive'; 5 | 6 | @NgModule({ 7 | declarations: [InfiniteScrollComponent, ScrollableContainerDirective], 8 | exports: [InfiniteScrollComponent, ScrollableContainerDirective], 9 | imports: [CommonModule], 10 | }) 11 | export class PaScrollModule {} 12 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/side-nav/side-nav.directive.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:directive-selector */ 2 | import { Directive } from '@angular/core'; 3 | 4 | @Directive({ 5 | selector: 'pa-side-nav-content', 6 | standalone: false, 7 | }) 8 | export class SideNavContentDirective {} 9 | 10 | @Directive({ 11 | selector: 'pa-side-nav-header', 12 | standalone: false, 13 | }) 14 | export class SideNavHeaderDirective {} 15 | 16 | @Directive({ 17 | selector: 'pa-side-nav-footer', 18 | standalone: false, 19 | }) 20 | export class SideNavFooterDirective {} 21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/theme/_card.tokens.scss: -------------------------------------------------------------------------------- 1 | @use 'palette.tokens'; 2 | @use 'spacing.tokens'; 3 | 4 | $background-card: palette.$color-light-stronger !default; 5 | $background-card-hover: palette.$color-neutral-lightest !default; 6 | $background-card-active: palette.$color-neutral-lighter !default; 7 | 8 | $border-card: 1px solid palette.$color-neutral-lighter !default; 9 | $border-radius-card: spacing.$border-radius-default !default; 10 | 11 | $padding-horizontal-card: spacing.rhythm(2) !default; 12 | $padding-vertical-card: spacing.rhythm(2) !default; 13 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scrollbar-page/scrollbar-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './scrollbar-page.component.html', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | standalone: false, 7 | }) 8 | export class ScrollbarPageComponent { 9 | code = `
    dynamic scrollbar styling
    10 |
    scrollbars hidden
    11 |
    scrollbars always visible with custom style
    12 | `; 13 | } 14 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/slider.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.run/All Pastanaga.run.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/button-page/button-description/button-description.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-button-description', 5 | templateUrl: './button-description.component.html', 6 | standalone: false, 7 | }) 8 | export class ButtonDescriptionComponent { 9 | buttonLinkCode = ` 13 | {{ 'generic.back' | translate }} 14 | `; 15 | paButtonTag = ``; 16 | } 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/review.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/common-doc/form-field-config-standalone.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[paDemoFormFieldConfigStandalone]', 5 | standalone: false, 6 | }) 7 | export class FormFieldConfigStandaloneDirective { 8 | value?: any; 9 | valueChangeEvent?: any; 10 | statusChangeEvent?: any; 11 | config?: any = {}; 12 | 13 | updateConfig(config: any) { 14 | if (config.value !== this.config.value && (!!config.value || !!this.config.value)) { 15 | this.value = config.value; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table.component.html: -------------------------------------------------------------------------------- 1 |
    5 | @if (!noHeader) { 6 |
    7 |
    8 | 9 | 10 |
    11 |
    12 | } 13 |
    14 | 15 |
    16 |
    17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/icon/icon.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { IconComponent } from './icon.component'; 4 | import { AngularSvgIconModule } from 'angular-svg-icon'; 5 | import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; 6 | 7 | @NgModule({ 8 | imports: [CommonModule, AngularSvgIconModule], 9 | declarations: [IconComponent], 10 | exports: [IconComponent], 11 | providers: [provideHttpClient(withInterceptorsFromDi())], 12 | }) 13 | export class PaIconModule {} 14 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/icon-page/icon-page.component.scss: -------------------------------------------------------------------------------- 1 | // We can't import variables here if we want to be able to use those demo pages in other applications 2 | .icon-list-container { 3 | background: #f1f3f4; 4 | display: flex; 5 | flex-wrap: wrap; 6 | max-height: 330px; 7 | overflow: auto; 8 | margin-bottom: 30px; 9 | 10 | .icon-container { 11 | width: 120px; 12 | height: 60px; 13 | margin: 18px 0; 14 | display: flex; 15 | flex-direction: column; 16 | text-align: center; 17 | 18 | span { 19 | font-size: 12px; 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scroll-pages/infinite-scroll-demo/infinite-scroll-demo.component.html: -------------------------------------------------------------------------------- 1 | 4 | Back 5 | 6 | 7 |
    8 |
    9 |

    Infinite scroll demo

    10 |

    Total: {{ total | async }}

    11 | 12 | @for (card of data | async; track card.index) { 13 | 14 | } 15 | 16 |
    17 |
    18 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-lead-cell-multi-line/table-lead-cell-multi-line.component.html: -------------------------------------------------------------------------------- 1 |
    7 | 8 |
    9 |
    10 |
    11 |
    12 |
    13 | -------------------------------------------------------------------------------- /projects/demo/src/assets/i18n/la.ts: -------------------------------------------------------------------------------- 1 | import { TranslationEntries } from '@guillotinaweb/pastanaga-angular'; 2 | 3 | export const DEMO_LA: TranslationEntries = { 4 | common: { 5 | close: 'Claudere', 6 | loading: 'Tolenda…', 7 | dismiss: 'Demittere', 8 | yes: 'Ita', 9 | no: 'Non', 10 | }, 11 | 'demo-page': { 12 | title: 'Pastanaga usi exampla', 13 | score: '{{points}} puncta de {{total}}', 14 | languages: { 15 | en: 'Anglicus', 16 | fr: 'Gallico', 17 | latin: 'Latinus', 18 | }, 19 | 'current-language-label': 'Current lingua', 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/redo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/row-after.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scroll-pages/data-card/data-card.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 3 | 4 | .pa-demo-card { 5 | border-bottom: 1px solid palette.$color-neutral-lightest; 6 | padding: spacing.rhythm(2) spacing.rhythm(1); 7 | 8 | .contact { 9 | display: flex; 10 | justify-content: space-between; 11 | margin-top: spacing.rhythm(1); 12 | } 13 | small { 14 | color: palette.$color-neutral-regular; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-sortable-header-cell/table-sortable-header-cell.component.html: -------------------------------------------------------------------------------- 1 |
    7 | 20 |
    21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/out.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/card-page/card-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-card-page', 5 | templateUrl: './card-page.component.html', 6 | styleUrls: ['./card-page.component.scss'], 7 | standalone: false, 8 | }) 9 | export class CardPageComponent { 10 | example = ` 12 |

    Some title

    13 |

    Card content can be anything

    14 |     `; 15 | 16 | onClick() { 17 | console.log('You clicked on a card'); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /ghpages.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | REPO_PATH=$PWD 4 | pushd $HOME 5 | git config --global user.email "github@github.com"; 6 | git config --global user.name "GitHub Actions"; 7 | git clone --branch=gh-pages https://${GH_ACTIONS_TOKEN}@github.com/plone/pastanaga-angular publish 2>&1 > /dev/null 8 | cd publish 9 | # delete main demo: find and remove all files except current, v1 and .git directories 10 | find . -maxdepth 1 ! -name v1 ! -name .git ! -name . -exec rm -rv {} \; 11 | cp -r $REPO_PATH/dist/demo/* . 12 | git add . 13 | git commit -m "Update main demo" 14 | git push -fq origin gh-pages 2>&1 > /dev/null 15 | popd 16 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/row-before.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/column-after.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/icon-page/icon-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; 2 | import { ICONS } from '../../../../assets/glyphs'; 3 | import { BaseIconPageComponent } from './base-icon-page.component'; 4 | 5 | @Component({ 6 | templateUrl: './icon-page.component.html', 7 | styleUrls: ['./icon-page.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false, 10 | }) 11 | export class IconPageComponent extends BaseIconPageComponent implements OnInit { 12 | ngOnInit(): void { 13 | this.icons = ICONS.sort(); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/modal-page/dialog-example/dialog-without-footer-example.component.html: -------------------------------------------------------------------------------- 1 | 2 | Dialog title 3 | @if (!!modal.config.data?.['displayDescription']) { 4 | Dialog description 5 | } 6 | 7 |
    8 |

    Some simple content, like a simple form.

    9 |
    10 | Token 11 | Copy 12 |
    13 |
    14 |     15 |     16 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/form-field/form-field.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormFieldHintComponent } from './form-field-hint/form-field-hint.component'; 4 | import { PaFormControlDirective } from './pa-form-control.directive'; 5 | import { PaTranslateModule } from '../../translate'; 6 | 7 | @NgModule({ 8 | declarations: [FormFieldHintComponent, PaFormControlDirective], 9 | exports: [FormFieldHintComponent, PaFormControlDirective], 10 | imports: [CommonModule, PaTranslateModule], 11 | }) 12 | export class PaFormFieldModule {} 13 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/tabs/tabs.module.ts: -------------------------------------------------------------------------------- 1 | import { CommonModule } from '@angular/common'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { TabItemComponent } from './tab-item.component'; 5 | import { TabsListComponent } from './tabs-list.component'; 6 | import { PaIconModule } from '../icon'; 7 | import { PaFocusableModule } from '../focusable'; 8 | 9 | @NgModule({ 10 | imports: [CommonModule, PaIconModule, PaFocusableModule], 11 | exports: [TabsListComponent, TabItemComponent], 12 | declarations: [TabsListComponent, TabItemComponent], 13 | providers: [], 14 | }) 15 | export class PaTabsModule {} 16 | -------------------------------------------------------------------------------- /.github/workflows/ghpages.yml: -------------------------------------------------------------------------------- 1 | name: Update GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | - 1.x 8 | env: 9 | GH_ACTIONS_TOKEN: ${{ secrets.GH_ACTIONS_TOKEN }} 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v3 15 | - uses: actions/setup-node@v3 16 | with: 17 | node-version: 18 18 | - run: npm install 19 | - run: npm run build:demo 20 | - run: cp ./dist/demo/index.html ./dist/demo/404.html 21 | - run: ./ghpages.sh 22 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/column-before.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/controls/slider/slider.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | import { SliderComponent } from './slider.component'; 5 | import { PaFormFieldModule } from '../form-field'; 6 | import { PaFocusableModule } from '../../focusable'; 7 | 8 | @NgModule({ 9 | declarations: [SliderComponent], 10 | imports: [CommonModule, FormsModule, PaFormFieldModule, ReactiveFormsModule, PaFocusableModule], 11 | exports: [SliderComponent], 12 | }) 13 | export class PaSliderModule {} 14 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/language.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/toast/toast.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../styles/theme/spacing.tokens' as spacing; 2 | @use '../../styles/theme/transitions.tokens' as transitions; 3 | 4 | :host { 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | margin: 0 auto; 9 | opacity: 0; 10 | animation: toastIn transitions.$transition-process-in forwards; 11 | z-index: 1; 12 | } 13 | 14 | @keyframes toastIn { 15 | from { 16 | opacity: 0; 17 | transform: translateY(calc(#{spacing.rhythm(8)} * -1)); 18 | } 19 | to { 20 | opacity: 1; 21 | transform: translateY(spacing.rhythm(3)); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-row/table-row.component.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-table-row', 5 | templateUrl: 'table-row.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | encapsulation: ViewEncapsulation.None, 8 | standalone: false, 9 | }) 10 | export class TableRowComponent { 11 | @Input({ transform: booleanAttribute }) clickable = false; 12 | @Input({ transform: booleanAttribute }) disabled = false; 13 | @Input({ transform: booleanAttribute }) hoverable = false; 14 | } 15 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/typography-page/typography-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 3 | @use '../../../../../../pastanaga-angular/src/styles/theme/typography.tokens' as typography; 4 | 5 | .typography-table > div:not(.separator) { 6 | padding: spacing.rhythm(1); 7 | } 8 | 9 | .header { 10 | background: palette.$color-neutral-light; 11 | font-weight: typography.$font-weight-semi-bold; 12 | } 13 | 14 | .separator { 15 | border-bottom: 1px solid palette.$color-neutral-light; 16 | } 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/leading-image.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/info.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/map.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/discussion.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/bold.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/dropdown/dropdown.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../styles/theme/spacing.tokens' as spacing; 2 | 3 | $option-height: spacing.rhythm(6); 4 | 5 | .pa-popup-wrapper { 6 | padding: 0; 7 | // display a maximum of 5.5 options in the list, so the last one is cut and user knows they should scroll to see more 8 | max-height: $option-height * 5.5; 9 | max-width: 100%; 10 | overflow-y: auto; 11 | } 12 | .pa-menu { 13 | list-style: none; 14 | margin: 0; 15 | padding-left: 0; 16 | } 17 | 18 | @media (min-width: spacing.$size-viewport-large-min) { 19 | .pa-popup-wrapper:not(.no-max-width) { 20 | max-width: spacing.rhythm(32); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/index.ts: -------------------------------------------------------------------------------- 1 | export * from './table.component'; 2 | export * from './table.directives'; 3 | export * from './table.models'; 4 | export * from './table.module'; 5 | export * from './table-cell/table-cell.component'; 6 | export * from './table-cell-menu/table-cell-menu.component'; 7 | export * from './table-lead-cell-multi-line/table-lead-cell-multi-line.component'; 8 | export * from './table-row/table-row.component'; 9 | export * from './table-row-header/table-row-header.component'; 10 | export * from './table-sortable-header/table-sortable-header.component'; 11 | export * from './table-sortable-header-cell/table-sortable-header-cell.component'; 12 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/date-picker-form-control-example/date-picker-form-control-example.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 8 | 9 |
      10 |
    • value change event: {{ valueChangeEvent | json }}
      • 11 |
    • status change event: {{ statusChangeEvent | json }}
      • 12 |
    13 |
    14 | 15 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/avatar-page/avatar-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { avatar } from '../../demo.component'; 4 | 5 | @Component({ 6 | selector: 'app-avatar-page', 7 | templateUrl: './avatar-page.component.html', 8 | styleUrls: ['./avatar-page.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | standalone: false, 11 | }) 12 | export class AvatarPageComponent { 13 | image: Observable = avatar; 14 | 15 | code = ``; 19 | } 20 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scroll-pages/infinite-scroll-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './infinite-scroll-page.component.html', 5 | styleUrls: ['./infinite-scroll-page.component.scss'], 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class InfiniteScrollPageComponent { 10 | code = ` 11 | 13 | `; 14 | 15 | demoVisible = false; 16 | } 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/side-nav/side-nav-item/side-nav-item.component.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, ChangeDetectionStrategy, Component, Input } from '@angular/core'; 2 | import { trimString } from '../../common'; 3 | 4 | @Component({ 5 | selector: 'pa-side-nav-item', 6 | templateUrl: './side-nav-item.component.html', 7 | styleUrls: ['./side-nav-item.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false, 10 | }) 11 | export class SideNavItemComponent { 12 | @Input({ transform: booleanAttribute }) active = false; 13 | @Input({ transform: booleanAttribute }) header = false; 14 | @Input({ transform: trimString }) label = ''; 15 | } 16 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/chips/base-chip.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, Directive, Input } from '@angular/core'; 2 | import { AvatarModel } from '../avatar'; 3 | import { IconModel } from '../icon'; 4 | import { trimString } from '../common'; 5 | 6 | @Directive() 7 | export class BaseChip { 8 | @Input() avatar?: AvatarModel; 9 | @Input() icon?: IconModel; 10 | 11 | @Input() ariaRole = 'listitem'; 12 | 13 | @Input() value?: any; 14 | 15 | @Input({ transform: trimString }) backgroundColor = ''; 16 | @Input({ transform: trimString }) textColor = ''; 17 | @Input({ transform: trimString }) borderColor = ''; 18 | 19 | @Input({ transform: booleanAttribute }) disabled = false; 20 | } 21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-lead-cell-multi-line/table-lead-cell-multi-line.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../styles/theme/palette.tokens' as palette; 2 | @use '../../../styles/theme/spacing.tokens' as spacing; 3 | @use '../../../styles/theme/typography.tokens' as typography; 4 | 5 | pa-table-lead-image { 6 | margin-right: spacing.rhythm(1); 7 | } 8 | 9 | .pa-lead-text { 10 | overflow: hidden; 11 | } 12 | 13 | .pa-lead-title { 14 | overflow: hidden; 15 | text-overflow: ellipsis; 16 | white-space: nowrap; 17 | } 18 | 19 | .pa-lead-description { 20 | color: palette.$color-neutral-regular; 21 | font-size: typography.font-size(xs); 22 | line-height: typography.line-height(s); 23 | } 24 | -------------------------------------------------------------------------------- /test-config.helper.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | type CompilerOptions = Partial<{ 4 | providers: any[]; 5 | useJit: boolean; 6 | preserveWhitespaces: boolean; 7 | }>; 8 | export type ConfigureFn = (testBed: typeof TestBed) => void; 9 | 10 | export const configureTests = (configure: ConfigureFn, compilerOptions: CompilerOptions = {}) => { 11 | const compilerConfig: CompilerOptions = { 12 | preserveWhitespaces: false, 13 | ...compilerOptions, 14 | }; 15 | 16 | const configuredTestBed = TestBed.configureCompiler(compilerConfig); 17 | 18 | configure(configuredTestBed); 19 | 20 | return configuredTestBed.compileComponents().then(() => configuredTestBed); 21 | }; 22 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/typography-page/typography-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core'; 2 | import { BreakpointObserver, ViewportMode } from '@guillotinaweb/pastanaga-angular'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Component({ 6 | selector: 'pa-demo-typography-page', 7 | templateUrl: './typography-page.component.html', 8 | styleUrls: ['./typography-page.component.scss'], 9 | changeDetection: ChangeDetectionStrategy.OnPush, 10 | standalone: false, 11 | }) 12 | export class TypographyPageComponent { 13 | mode$: Observable = this.breakpoint.currentMode; 14 | 15 | constructor(private breakpoint: BreakpointObserver) {} 16 | } 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/components/_popup.scss: -------------------------------------------------------------------------------- 1 | @use '../theme/palette.tokens' as palette; 2 | @use '../theme/shadows.tokens' as shadows; 3 | @use '../theme/spacing.tokens' as spacing; 4 | @use '../theme/z-index.tokens' as z-index; 5 | 6 | .pa-popup { 7 | z-index: z-index.$z-index-popup; 8 | box-shadow: shadows.$shadow-default; 9 | border-radius: spacing.$border-radius-default; 10 | min-width: spacing.rhythm(24); 11 | max-height: spacing.rhythm(29); 12 | overflow-x: hidden; 13 | overflow-y: auto; 14 | 15 | &.pa-hidden { 16 | display: none; 17 | } 18 | 19 | .pa-popup-wrapper { 20 | padding: spacing.rhythm(2); 21 | background: palette.$color-light-stronger; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/reverse.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/chips/chip-closeable/chip-closeable.component.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; 2 | import { BaseChip } from '../base-chip'; 3 | 4 | @Component({ 5 | selector: 'pa-chip-closeable', 6 | templateUrl: './chip-closeable.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class ChipCloseableComponent extends BaseChip { 11 | @Input({ transform: booleanAttribute }) readonly = false; 12 | @Output() closed = new EventEmitter(); 13 | 14 | close($event: Event) { 15 | this.closed.emit({ event: $event, value: this.value }); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/chips/chip-selectionable/chip-selectionable.component.ts: -------------------------------------------------------------------------------- 1 | import { BaseChip } from '../base-chip'; 2 | import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'pa-chip-selectionable', 6 | templateUrl: './chip-selectionable.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class ChipSelectionableComponent extends BaseChip { 11 | @Input() selected?: boolean; 12 | 13 | @Output() select: EventEmitter = new EventEmitter(); 14 | 15 | triggerSelect() { 16 | if (!this.disabled) { 17 | this.select.emit(); 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/popup/popup.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { PopupDirective } from './popup.directive'; 4 | import { PopupComponent } from './popup.component'; 5 | import { PopoverComponent } from './popover/popover.component'; 6 | import { ExtendedPopupDirective, PopoverDirective } from './popover/popover.directive'; 7 | 8 | @NgModule({ 9 | imports: [CommonModule], 10 | exports: [PopupComponent, PopupDirective, PopoverComponent, PopoverDirective, ExtendedPopupDirective], 11 | declarations: [PopupComponent, PopupDirective, PopoverComponent, PopoverDirective, ExtendedPopupDirective], 12 | }) 13 | export class PaPopupModule {} 14 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/date-picker-form-group-example/date-picker-form-group-example.component.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 | 9 |
    10 | 11 |
      12 |
    • value change event: {{ valueChangeEvent | json }}
      • 13 |
    • status change event: {{ statusChangeEvent | json }}
      • 14 |
    15 |
    16 | 17 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/date-picker-standalone-example/date-picker-standalone-example.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 10 | 11 |
      12 |
    • value change event: {{ valueChangeEvent | json }}
      • 13 |
    • status change event: {{ statusChangeEvent | json }}
      • 14 |
    15 |
    16 | 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-lead-cell-multi-line/table-lead-cell-multi-line.component.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-table-lead-cell-multi-line', 5 | templateUrl: './table-lead-cell-multi-line.component.html', 6 | styleUrls: ['./table-lead-cell-multi-line.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | encapsulation: ViewEncapsulation.None, 9 | standalone: false, 10 | }) 11 | export class TableLeadCellMultiLineComponent { 12 | @Input({ transform: booleanAttribute }) clickable = false; 13 | @Input({ transform: booleanAttribute }) disabled = false; 14 | } 15 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/history.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/modal/confirmation-dialog/confirmation-dialog.component.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { BaseModalComponent } from '../base-modal.component'; 3 | 4 | @Component({ 5 | selector: 'pa-confirmation-dialog', 6 | templateUrl: './confirmation-dialog.component.html', 7 | styleUrls: ['./confirmation-dialog.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false, 10 | }) 11 | export class ConfirmationDialogComponent extends BaseModalComponent implements AfterViewInit { 12 | override ngAfterViewInit() { 13 | super.ngAfterViewInit(); 14 | 15 | this.setFocus(); 16 | this.refresh(); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/tooltip-page/tooltip-page.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './tooltip-page.component.html', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | standalone: false, 7 | }) 8 | export class TooltipPageComponent { 9 | importCode = `imports: [ 10 | PaTooltipModule, 11 | ]`; 12 | code = `Hover me 2 seconds 13 | Following mouse 14 | With -80px offset 15 | `; 16 | } 17 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/tooltip/tooltip.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { TooltipComponent } from './tooltip.component'; 4 | import { PaTranslateModule } from '../translate'; 5 | import { TooltipDirective } from './tooltip.directive'; 6 | import { EllipsisTooltipDirective, ExtendedTooltipDirective } from './ellipsis-tooltip.directive'; 7 | 8 | @NgModule({ 9 | declarations: [TooltipComponent, TooltipDirective, EllipsisTooltipDirective, ExtendedTooltipDirective], 10 | exports: [TooltipComponent, TooltipDirective, EllipsisTooltipDirective, ExtendedTooltipDirective], 11 | imports: [CommonModule, PaTranslateModule], 12 | }) 13 | export class PaTooltipModule {} 14 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/date-picker-form-group-example/date-picker-form-group-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigFormGroupDirective } from '../../common-doc/form-field-config-form-group.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-date-picker-form-group-example', 6 | templateUrl: './date-picker-form-group-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class DatePickerFormGroupExampleComponent extends FormFieldConfigFormGroupDirective { 11 | override updateConfig(config: any) { 12 | super.updateConfig(config); 13 | this.config = config; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/date-picker-standalone-example/date-picker-standalone-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigStandaloneDirective } from '../../common-doc/form-field-config-standalone.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-date-picker-standalone-example', 6 | templateUrl: './date-picker-standalone-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class DatePickerStandaloneExampleComponent extends FormFieldConfigStandaloneDirective { 11 | override updateConfig(config: any) { 12 | super.updateConfig(config); 13 | this.config = config; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/popover-page/popover-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../pastanaga-angular/src/styles/theme/typography.tokens' as typography; 3 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens'; 4 | 5 | .container { 6 | display: inline-block; 7 | } 8 | 9 | .more { 10 | color: palette.$color-primary-regular; 11 | cursor: pointer; 12 | font-weight: typography.$font-weight-semi-bold; 13 | } 14 | 15 | .flex-container { 16 | display: flex; 17 | gap: spacing.rhythm(2); 18 | margin-top: spacing.rhythm(4); 19 | 20 | .far-right { 21 | position: absolute; 22 | right: spacing.rhythm(0.5); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/automated-content.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/state.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.github/workflows/tag.yml: -------------------------------------------------------------------------------- 1 | name: Tag version and publish 2 | env: 3 | CI: true 4 | on: 5 | push: 6 | branches: 7 | - main 8 | - 1.x 9 | jobs: 10 | release: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - name: checkout 14 | uses: actions/checkout@v3 15 | - name: setup Node 16 | uses: actions/setup-node@v3 17 | with: 18 | node-version: 18 19 | - run: ./tag-version.sh 20 | - run: npm install && npm run build 21 | - uses: JS-DevTools/npm-publish@v1 22 | with: 23 | token: ${{ secrets.NPM_TOKEN }} 24 | package: ./dist/pastanaga-angular/package.json 25 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/date-picker-form-control-example/date-picker-form-control-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigFormControlDirective } from '../../common-doc/form-field-config-form-control.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-date-picker-form-control-example', 6 | templateUrl: './date-picker-form-control-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class DatePickerFormControlExampleComponent extends FormFieldConfigFormControlDirective { 11 | override updateConfig(config: any) { 12 | super.updateConfig(config); 13 | this.config = config; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/more-horizontal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/components/_icons.scss: -------------------------------------------------------------------------------- 1 | @use '../theme/icon.tokens' as icon; 2 | 3 | pa-icon { 4 | svg { 5 | vertical-align: middle; 6 | fill: currentColor; 7 | &.pa-small { 8 | width: icon.$size-icon-small; 9 | height: icon.$size-icon-small; 10 | } 11 | &.pa-medium { 12 | width: icon.$size-icon-medium; 13 | height: icon.$size-icon-medium; 14 | } 15 | &.pa-large { 16 | width: icon.$size-icon-large; 17 | height: icon.$size-icon-large; 18 | } 19 | &.pa-xlarge { 20 | width: icon.$size-icon-xlarge; 21 | height: icon.$size-icon-xlarge; 22 | } 23 | &.pa-xxlarge { 24 | width: icon.$size-icon-xxlarge; 25 | height: icon.$size-icon-xxlarge; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/theme/_avatar.tokens.scss: -------------------------------------------------------------------------------- 1 | @use 'palette.tokens'; 2 | @use 'spacing.tokens'; 3 | @use 'typography.tokens'; 4 | 5 | $avatar-primary: palette.$color-primary-lightest !default; 6 | $avatar-secondary: palette.$color-secondary-lightest !default; 7 | $avatar-tertiary: palette.$color-tertiary-lightest !default; 8 | 9 | $size-avatar-tiny: spacing.rhythm(3) !default; 10 | $size-avatar-small: spacing.rhythm(4) !default; 11 | $size-avatar-medium: spacing.rhythm(6) !default; 12 | $size-avatar-huge: spacing.rhythm(16) !default; 13 | $background-color-avatar-default: palette.$color-neutral-lighter !default; 14 | $font-weight-avatar-icon-alt: typography.$font-weight-semi-bold !default; 15 | $font-weight-avatar-initials: typography.$font-weight-thin !default; 16 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/form-field-description.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-form-field-description', 5 | // prettier-ignore 6 | template: `
    As other Pastanaga’s form fields, {{component}} supports 3 modes internally in order to be used in various context: 7 |
      8 |
    • Standalone: using data-binding on value,
      • 9 |
    • Template-driven form: using ngModel directive,
      • 10 |
    • Reactive form: using formControl and formControlName directives,
      • 11 |
    12 |
    `, 13 | standalone: false, 14 | }) 15 | export class FormFieldDescriptionComponent { 16 | @Input() component = ''; 17 | } 18 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/expander/expander.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { PaButtonModule } from '../button'; 4 | import { PaTranslateModule } from '../translate'; 5 | import { ExpanderBodyDirective, ExpanderHeaderDirective, ExpanderHeaderSideBlockDirective } from './expander.directive'; 6 | import { ExpanderComponent } from './expander.component'; 7 | 8 | const COMPONENTS = [ 9 | ExpanderComponent, 10 | ExpanderHeaderDirective, 11 | ExpanderBodyDirective, 12 | ExpanderHeaderSideBlockDirective, 13 | ]; 14 | 15 | @NgModule({ 16 | imports: [CommonModule, PaButtonModule, PaTranslateModule], 17 | declarations: COMPONENTS, 18 | exports: COMPONENTS, 19 | }) 20 | export class PaExpanderModule {} 21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/properties.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/common-doc/form-field-config-ng-model.directive.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectorRef, Directive } from '@angular/core'; 2 | import { detectChanges } from '@guillotinaweb/pastanaga-angular'; 3 | 4 | @Directive({ 5 | selector: '[paDemoFormFieldConfigNgModel]', 6 | standalone: false, 7 | }) 8 | export class FormFieldConfigNgModelDirective { 9 | model?: any; 10 | 11 | valueChangeEvent?: any; 12 | statusChangeEvent?: any; 13 | ngModelChangeEvent?: any; 14 | 15 | config?: any = {}; 16 | 17 | constructor(protected cdr: ChangeDetectorRef) {} 18 | 19 | updateConfig(config: any) { 20 | if (config.value !== this.config.value && (!!config.value || !!this.config.value)) { 21 | this.model = config.value; 22 | detectChanges(this.cdr); 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/scroll-pages/infinite-scroll-demo/infinite-scroll-demo.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 3 | @use '../../../../../../../pastanaga-angular/src/styles/theme/z-index.tokens' as z-index; 4 | 5 | :host { 6 | background-color: palette.$color-light-stronger; 7 | height: 100%; 8 | left: 0; 9 | position: fixed; 10 | top: 0; 11 | width: 100%; 12 | z-index: z-index.$z-index-modal; 13 | } 14 | 15 | .pa-scrollable-container { 16 | height: 100vh; 17 | } 18 | 19 | $header-padding: spacing.rhythm(3); 20 | 21 | pa-button { 22 | left: $header-padding; 23 | position: absolute; 24 | top: $header-padding; 25 | } 26 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/theme/_scrollbar.tokens.scss: -------------------------------------------------------------------------------- 1 | @use 'palette.tokens'; 2 | @use 'spacing.tokens'; 3 | 4 | $scrollbar-border-radius: spacing.rhythm(3) !default; 5 | 6 | $scrollbar-padding-mobile: spacing.rhythm(0.25) !default; 7 | $scrollbar-padding-desktop: spacing.rhythm(0.5) !default; 8 | 9 | $scrollbar-width-mobile: spacing.rhythm(1) !default; 10 | $scrollbar-width-desktop: spacing.rhythm(2) !default; 11 | 12 | $color-scrollbar-thumb: transparent !default; 13 | $color-scrollbar-thumb-active: palette.$color-neutral-light !default; 14 | 15 | $color-scrollbar-thumb-border: transparent !default; 16 | $color-scrollbar-thumb-border-active: palette.$color-light-stronger !default; 17 | 18 | $color-scrollbar-track: transparent !default; 19 | $color-scrollbar-track-active: transparent !default; 20 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/modal/modal.directive.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:directive-selector */ 2 | import { Directive } from '@angular/core'; 3 | 4 | @Directive({ 5 | selector: 'pa-modal-title', 6 | standalone: false, 7 | }) 8 | export class ModalTitleDirective {} 9 | 10 | @Directive({ 11 | selector: 'pa-modal-description', 12 | standalone: false, 13 | }) 14 | export class ModalDescriptionDirective {} 15 | 16 | @Directive({ 17 | selector: 'pa-modal-content', 18 | standalone: false, 19 | }) 20 | export class ModalContentDirective {} 21 | 22 | @Directive({ 23 | selector: 'pa-modal-image', 24 | standalone: false, 25 | }) 26 | export class ModalImageDirective {} 27 | 28 | @Directive({ 29 | selector: 'pa-modal-footer', 30 | standalone: false, 31 | }) 32 | export class ModalFooterDirective {} 33 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/container-page/container-demo/container-demo.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core'; 2 | import { BreakpointObserver } from '@guillotinaweb/pastanaga-angular'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-container-demo', 6 | templateUrl: './container-demo.component.html', 7 | styleUrls: ['./container-demo.component.scss'], 8 | changeDetection: ChangeDetectionStrategy.OnPush, 9 | standalone: false, 10 | }) 11 | export class ContainerDemoComponent { 12 | @Output() back: EventEmitter = new EventEmitter(); 13 | 14 | currentMinSize = this.breakpointObserver.currentMinSize; 15 | currentMode = this.breakpointObserver.currentMode; 16 | 17 | constructor(private breakpointObserver: BreakpointObserver) {} 18 | } 19 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/input-page/input-form-group-example/input-form-group-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigFormGroupDirective } from '../../common-doc/form-field-config-form-group.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-input-form-group-example', 6 | templateUrl: './input-form-group-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class InputFormGroupExampleComponent extends FormFieldConfigFormGroupDirective { 11 | keyupEvent?: any; 12 | enterEvent?: any; 13 | blurEvent?: any; 14 | focusEvent?: any; 15 | 16 | override updateConfig(config: any) { 17 | super.updateConfig(config); 18 | this.config = config; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/demo/src/styles.scss: -------------------------------------------------------------------------------- 1 | @use '../../pastanaga-angular/src/styles/core'; 2 | @use '../../pastanaga-angular/src/styles/grid'; 3 | @use '../../pastanaga-angular/src/styles/theme/fonts'; 4 | @use '../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 5 | 6 | .form-field-config { 7 | .state-option { 8 | display: flex; 9 | margin: spacing.rhythm(1) 0; 10 | } 11 | .option { 12 | margin-right: spacing.rhythm(2); 13 | 14 | input { 15 | margin-right: spacing.rhythm(1); 16 | } 17 | } 18 | fieldset { 19 | margin: spacing.rhythm(3) 0; 20 | } 21 | } 22 | .component { 23 | display: flex; 24 | pa-input, 25 | pa-select, 26 | pa-textarea, 27 | ul, 28 | form { 29 | flex: 1; 30 | } 31 | li { 32 | display: flex; 33 | word-break: break-all; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/input-page/input-standalone-example/input-standalone-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigStandaloneDirective } from '../../common-doc/form-field-config-standalone.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-input-standalone-example', 6 | templateUrl: './input-standalone-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class InputStandaloneExampleComponent extends FormFieldConfigStandaloneDirective { 11 | keyupEvent?: any; 12 | enterEvent?: any; 13 | blurEvent?: any; 14 | focusEvent?: any; 15 | 16 | override updateConfig(config: any) { 17 | super.updateConfig(config); 18 | this.config = config; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/navigation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/input-page/input-form-control-example/input-form-control-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigFormControlDirective } from '../../common-doc/form-field-config-form-control.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-input-form-control-example', 6 | templateUrl: './input-form-control-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class InputFormControlExampleComponent extends FormFieldConfigFormControlDirective { 11 | keyupEvent?: any; 12 | enterEvent?: any; 13 | blurEvent?: any; 14 | focusEvent?: any; 15 | 16 | override updateConfig(config: any) { 17 | super.updateConfig(config); 18 | this.config = config; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/theme/_chips.tokens.scss: -------------------------------------------------------------------------------- 1 | @use 'palette.tokens'; 2 | @use 'spacing.tokens'; 3 | @use 'typography.tokens'; 4 | 5 | $color-background-chip-default: palette.$color-neutral-lightest !default; 6 | $color-background-chip-default-hover: palette.$color-neutral-lighter !default; 7 | $color-background-chip-default-selected: palette.$color-primary-lightest !default; 8 | $color-background-chip-default-disabled: palette.$color-neutral-light !default; 9 | 10 | $border-radius-chip: spacing.rhythm(5) !default; 11 | 12 | $border-chip: 1px solid transparent !default; 13 | $border-chip-disabled: 1px solid transparent !default; 14 | $border-chip-selected: 1px solid transparent !default; 15 | 16 | $font-size-chip: typography.font-size(s) !default; 17 | 18 | $padding-chip: spacing.rhythm(0.5) spacing.rhythm(1.5) !default; 19 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/text-area-page/textarea-form-group-example/textarea-form-group-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigFormGroupDirective } from '../../common-doc/form-field-config-form-group.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-textarea-form-group-example', 6 | templateUrl: './textarea-form-group-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class TextareaFormGroupExampleComponent extends FormFieldConfigFormGroupDirective { 11 | keyupEvent?: any; 12 | enterEvent?: any; 13 | blurEvent?: any; 14 | focusEvent?: any; 15 | 16 | override updateConfig(config: any) { 17 | super.updateConfig(config); 18 | this.config = config; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table-cell/table-cell.component.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-table-cell', 5 | templateUrl: 'table-cell.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | encapsulation: ViewEncapsulation.None, 8 | standalone: false, 9 | }) 10 | export class TableCellComponent { 11 | @Input({ transform: booleanAttribute }) clickable = false; 12 | @Input({ transform: booleanAttribute }) disabled = false; 13 | @Input({ transform: booleanAttribute }) header = false; 14 | @Input({ transform: booleanAttribute }) noWrap = false; 15 | @Input({ transform: booleanAttribute }) center = false; 16 | @Input({ transform: booleanAttribute }) borderRight = false; 17 | } 18 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/text-area-page/textarea-standalone-example/textarea-standalone-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigStandaloneDirective } from '../../common-doc/form-field-config-standalone.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-textarea-standalone-example', 6 | templateUrl: './textarea-standalone-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class TextareaStandaloneExampleComponent extends FormFieldConfigStandaloneDirective { 11 | keyupEvent?: any; 12 | enterEvent?: any; 13 | blurEvent?: any; 14 | focusEvent?: any; 15 | 16 | override updateConfig(config: any) { 17 | super.updateConfig(config); 18 | this.config = config; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/date-picker-ng-model-example/date-picker-ng-model-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; 2 | import { FormFieldConfigNgModelDirective } from '../../common-doc/form-field-config-ng-model.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-date-picker-ng-model-example', 6 | templateUrl: './date-picker-ng-model-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class DatePickerNgModelExampleComponent extends FormFieldConfigNgModelDirective { 11 | constructor(protected override cdr: ChangeDetectorRef) { 12 | super(cdr); 13 | } 14 | 15 | override updateConfig(config: any) { 16 | super.updateConfig(config); 17 | this.config = config; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/text-area-page/textarea-form-control-example/textarea-form-control-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component } from '@angular/core'; 2 | import { FormFieldConfigFormControlDirective } from '../../common-doc/form-field-config-form-control.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-textarea-form-control-example', 6 | templateUrl: './textarea-form-control-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class TextareaFormControlExampleComponent extends FormFieldConfigFormControlDirective { 11 | keyupEvent?: any; 12 | enterEvent?: any; 13 | blurEvent?: any; 14 | focusEvent?: any; 15 | 16 | override updateConfig(config: any) { 17 | super.updateConfig(config); 18 | this.config = config; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scripts/generate-sprite.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | 3 | import os 4 | import re 5 | import xml.etree.ElementTree as ET 6 | 7 | GLYPHS_DIR = os.path.join(os.path.dirname(__file__), '../projects/pastanaga-angular/src/glyphs') 8 | ET.register_namespace('', "http://www.w3.org/2000/svg") 9 | print('') 23 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/date-picker-page/date-picker-ng-model-example/date-picker-ng-model-example.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 11 | 12 |
      13 |
    • value change event: {{ valueChangeEvent | json }}
      • 14 |
    • status change event: {{ statusChangeEvent | json }}
      • 15 |
    • ngModelChange event: {{ ngModelChangeEvent | json }}
      • 16 |
    17 |
    18 | 19 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/draggable.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/scroll/infinite-scroll/infinite-scroll.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { InfiniteScrollComponent } from './infinite-scroll.component'; 2 | import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; 3 | 4 | describe('VirtualScrollComponent', () => { 5 | const createComponent = createComponentFactory({ 6 | component: InfiniteScrollComponent, 7 | detectChanges: false, 8 | }); 9 | let component: InfiniteScrollComponent; 10 | let spectator: Spectator; 11 | 12 | beforeEach(() => { 13 | spectator = createComponent(); 14 | component = spectator.component; 15 | }); 16 | 17 | it('should have two anchors in the dom', () => { 18 | expect(spectator.query('[qa="mid-anchor"]')).toBeTruthy(); 19 | expect(spectator.query('[qa="bottom-anchor"]')).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/_core.scss: -------------------------------------------------------------------------------- 1 | @use 'variables' as *; 2 | @use 'reboot' as *; 3 | @use 'typography' as *; 4 | 5 | @use 'components/avatar' as *; 6 | @use 'components/buttons' as *; 7 | @use 'components/card' as *; 8 | @use 'components/checkbox' as *; 9 | @use 'components/chips' as *; 10 | @use 'components/expander' as *; 11 | @use 'components/focus' as *; 12 | @use 'components/icons' as *; 13 | @use 'components/layout' as *; 14 | @use 'components/modal' as *; 15 | @use 'components/option' as *; 16 | @use 'components/popup' as *; 17 | @use 'components/popover' as *; 18 | @use 'components/scrollbar' as *; 19 | @use 'components/select' as *; 20 | @use 'components/tabs' as *; 21 | @use 'components/tables' as *; 22 | @use 'components/textfields' as *; 23 | @use 'components/toast' as *; 24 | @use 'components/toggle' as *; 25 | @use 'components/tooltip' as *; 26 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/avatar-pile/avatar-pile.module.ts: -------------------------------------------------------------------------------- 1 | import { AvatarPileComponent } from './avatar-pile.component'; 2 | import { PaAvatarModule } from '../avatar'; 3 | import { PaButtonModule } from '../button'; 4 | import { PaDropdownModule } from '../dropdown'; 5 | import { PaPopupModule } from '../popup'; 6 | import { PaTooltipModule } from '../tooltip'; 7 | import { PaTranslateModule } from '../translate'; 8 | import { NgModule } from '@angular/core'; 9 | import { CommonModule } from '@angular/common'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | PaAvatarModule, 15 | PaButtonModule, 16 | PaDropdownModule, 17 | PaPopupModule, 18 | PaTranslateModule, 19 | PaTooltipModule, 20 | ], 21 | declarations: [AvatarPileComponent], 22 | exports: [AvatarPileComponent], 23 | }) 24 | export class PaAvatarPileModule {} 25 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/side-nav/side-nav.component.html: -------------------------------------------------------------------------------- 1 | @if (visible || mode === 'desktop') { 2 | @if (mode !== 'desktop') { 3 |
    7 | } 8 | 9 |
    12 |
    15 | 16 | 17 | @if (mode !== 'desktop' && !hasHeader) { 18 | 23 | } 24 |
    25 | 26 |
    27 | 28 |
    29 |
    30 | } 31 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/date-picker/date-picker.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { DatePickerComponent } from './date-picker.component'; 3 | import { PaButtonModule } from '../button'; 4 | import { CommonModule } from '@angular/common'; 5 | import { PaTextFieldModule } from '../controls'; 6 | import { ReactiveFormsModule } from '@angular/forms'; 7 | import { PaIconModule } from '../icon'; 8 | import { PaPopupModule } from '../popup'; 9 | import { PaTranslateModule } from '../translate'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | ReactiveFormsModule, 15 | PaButtonModule, 16 | PaIconModule, 17 | PaPopupModule, 18 | PaTextFieldModule, 19 | PaTranslateModule, 20 | ], 21 | exports: [DatePickerComponent], 22 | declarations: [DatePickerComponent], 23 | }) 24 | export class PaDatePickerModule {} 25 | -------------------------------------------------------------------------------- /projects/demo/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { WelcomePageComponent } from './welcome-page/welcome-page.component'; 4 | import { menu } from './app.component'; 5 | 6 | function buildRoutesFromMenu() { 7 | const routes: Routes = [{ path: '', pathMatch: 'full', component: WelcomePageComponent }]; 8 | menu.forEach((section) => section.pages.forEach((page) => routes.push({ path: page.view, component: page.type }))); 9 | return routes; 10 | } 11 | 12 | const appRoutes: Routes = buildRoutesFromMenu(); 13 | 14 | @NgModule({ 15 | imports: [ 16 | RouterModule.forRoot(appRoutes, { 17 | paramsInheritanceStrategy: 'always', 18 | initialNavigation: 'enabledBlocking', 19 | }), 20 | ], 21 | exports: [RouterModule], 22 | }) 23 | export class AppRoutingModule {} 24 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/demo.directives.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'pa-demo-title', 5 | standalone: false, 6 | }) 7 | export class DemoTitleDirective {} 8 | 9 | @Directive({ 10 | selector: 'pa-demo-description', 11 | standalone: false, 12 | }) 13 | export class DemoDescriptionDirective {} 14 | 15 | @Directive({ 16 | selector: 'pa-demo-examples', 17 | standalone: false, 18 | }) 19 | export class DemoExamplesDirective {} 20 | 21 | @Directive({ 22 | selector: 'pa-demo-configuration', 23 | standalone: false, 24 | }) 25 | export class DemoConfigurationDirective {} 26 | 27 | @Directive({ 28 | selector: 'pa-demo-usage', 29 | standalone: false, 30 | }) 31 | export class DemoUsageDirective {} 32 | 33 | @Directive({ 34 | selector: 'pa-demo-code', 35 | standalone: false, 36 | }) 37 | export class DemoCodeDirective {} 38 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table.models.ts: -------------------------------------------------------------------------------- 1 | export interface IHeaderCell { 2 | id: string; 3 | label: string; 4 | active?: boolean; 5 | sortable?: boolean; 6 | descending?: boolean; 7 | centered?: boolean; 8 | } 9 | 10 | export class HeaderCell { 11 | id: string; 12 | label: string; 13 | sortable: boolean; 14 | active: boolean; 15 | descending: boolean; 16 | centered: boolean; 17 | 18 | constructor(data: IHeaderCell) { 19 | this.id = data.id; 20 | this.label = data.label; 21 | this.sortable = data.sortable || false; 22 | this.active = data.active || false; 23 | this.descending = data.descending || false; 24 | this.centered = data.centered || false; 25 | } 26 | } 27 | 28 | export class SortableHeaderCell extends HeaderCell { 29 | constructor(data: IHeaderCell) { 30 | super({ ...data, sortable: true }); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/translate/i18n/en.ts: -------------------------------------------------------------------------------- 1 | import { TranslationEntries } from '../translate.model'; 2 | 3 | export const I18N_EN: TranslationEntries = { 4 | pastanaga: { 5 | calendar: { 6 | months: 'Months', 7 | years: 'Years', 8 | 'invalid-format': 'Invalid date format', 9 | }, 10 | cancel: 'Cancel', 11 | close: 'Close', 12 | collapse: 'Collapse', 13 | confirm: 'Confirm', 14 | datetime: { 15 | 'a-few-seconds-ago': 'Just now', 16 | minutesAgo: '{{minutes}} mins ago', 17 | 'one-minute-ago': '1 min ago', 18 | yesterday: 'Yesterday', 19 | at: 'at', 20 | }, 21 | 'date-picker': { 22 | label: 'Pick a date', 23 | }, 24 | expand: 'Expand', 25 | more: 'More', 26 | show: 'Show {{type}}', 27 | 'sort-by': 'Sort by', 28 | total: '{{count}} total {{type}}', 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/button-page/button-page.component.scss: -------------------------------------------------------------------------------- 1 | @use '../../../../../../pastanaga-angular/src/styles/theme/palette.tokens' as palette; 2 | @use '../../../../../../pastanaga-angular/src/styles/theme/spacing.tokens' as spacing; 3 | 4 | .section-title { 5 | margin: spacing.rhythm(4) 0 spacing.rhythm(2); 6 | } 7 | .pa-container { 8 | margin-right: 0; 9 | .pa-buttons-container { 10 | display: flex; 11 | 12 | pa-button { 13 | margin-right: spacing.rhythm(2); 14 | } 15 | &.inverted { 16 | background-color: palette.$color-dark-stronger; 17 | padding: spacing.rhythm(1); 18 | } 19 | } 20 | .pa-buttons-block { 21 | display: flex; 22 | padding: spacing.rhythm(1); 23 | } 24 | 25 | @media (max-width: spacing.$size-viewport-large-max) { 26 | .pa-buttons-container { 27 | flex-direction: column; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/chips/chip-expandable/chip-expandable.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core'; 2 | import { BaseChip } from '../base-chip'; 3 | 4 | @Component({ 5 | selector: 'pa-chip-expandable', 6 | templateUrl: './chip-expandable.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class ChipExpandableComponent extends BaseChip { 11 | @Output() expanded: EventEmitter<{ event: Event; value: any }> = new EventEmitter(); 12 | 13 | isExpanded = false; 14 | 15 | expand($event: Event) { 16 | if (!this.disabled) { 17 | this.isExpanded = !this.isExpanded; 18 | this.expanded.emit({ event: $event, value: this.value }); 19 | } else { 20 | $event.stopPropagation(); 21 | $event.preventDefault(); 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/chips/chip/chip.component.html: -------------------------------------------------------------------------------- 1 |
    7 | @if (avatar; as avatar) { 8 | 15 | } 16 | 17 | @if (icon) { 18 | 21 | } 22 | 23 | 27 | 28 | 29 |
    30 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/common-doc/form-field-config-form-control.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import { UntypedFormControl } from '@angular/forms'; 3 | 4 | @Directive({ 5 | selector: '[paDemoFormFieldConfigFormControl]', 6 | standalone: false, 7 | }) 8 | export class FormFieldConfigFormControlDirective { 9 | control = new UntypedFormControl(); 10 | 11 | valueChangeEvent?: any; 12 | statusChangeEvent?: any; 13 | config?: any = {}; 14 | updateConfig(config: any) { 15 | if (config.value !== this.config.value && (!!config.value || !!this.config.value)) { 16 | this.control.patchValue(config.value); 17 | } 18 | if (config.disabled && !this.control.disabled) { 19 | this.control.disable(); 20 | } else if (!config.disabled && this.control.disabled) { 21 | this.control.enable(); 22 | } 23 | this.config = config; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/button/button.component.html: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/glyphs/quotes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/table/table.directives.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, Directive, HostBinding, Input } from '@angular/core'; 2 | 3 | // tslint:disable-next-line:directive-selector 4 | @Directive({ 5 | selector: 'pa-table-header', 6 | standalone: false, 7 | }) 8 | export class TableHeaderDirective { 9 | @Input({ transform: booleanAttribute }) noBackground = false; 10 | 11 | @HostBinding('class.no-background') get headerWithoutBackground() { 12 | return this.noBackground; 13 | } 14 | } 15 | 16 | @Directive({ 17 | selector: 'pa-table-lead-image', 18 | standalone: false, 19 | }) 20 | export class TableLeadImage {} 21 | 22 | @Directive({ 23 | selector: 'pa-table-lead-title', 24 | standalone: false, 25 | }) 26 | export class TableLeadTitle {} 27 | 28 | @Directive({ 29 | selector: 'pa-table-lead-description', 30 | standalone: false, 31 | }) 32 | export class TableLeadDescription {} 33 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/styles/components/_card.scss: -------------------------------------------------------------------------------- 1 | @use '../theme/card.tokens' as card; 2 | @use '../theme/transitions.tokens' as transitions; 3 | 4 | .pa-card-wrapper { 5 | background: card.$background-card; 6 | border: card.$border-card; 7 | border-radius: card.$border-radius-card; 8 | cursor: pointer; 9 | padding: card.$padding-vertical-card card.$padding-horizontal-card; 10 | transition: background transitions.$transition-hint; 11 | 12 | .pa-card-content { 13 | opacity: 1; 14 | transition: opacity transitions.$transition-hint; 15 | } 16 | 17 | &:hover { 18 | background: card.$background-card-hover; 19 | } 20 | 21 | &:active { 22 | background: card.$background-card-active; 23 | } 24 | 25 | &:disabled, 26 | &.pa-disabled { 27 | cursor: default; 28 | pointer-events: none; 29 | 30 | .pa-card-content { 31 | opacity: 0.3; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/input-page/input-ng-model-example/input-ng-model-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; 2 | import { FormFieldConfigNgModelDirective } from '../../common-doc/form-field-config-ng-model.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-input-ng-model-example', 6 | templateUrl: './input-ng-model-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class InputNgModelExampleComponent extends FormFieldConfigNgModelDirective { 11 | keyupEvent?: any; 12 | enterEvent?: any; 13 | blurEvent?: any; 14 | focusEvent?: any; 15 | 16 | constructor(protected override cdr: ChangeDetectorRef) { 17 | super(cdr); 18 | } 19 | 20 | override updateConfig(config: any) { 21 | super.updateConfig(config); 22 | this.config = config; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/table-page/table-sortable-header-cell-page/table-sortable-header-cell-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-demo-table-sortable-header-cell-page', 5 | templateUrl: './table-sortable-header-cell-page.component.html', 6 | changeDetection: ChangeDetectionStrategy.OnPush, 7 | standalone: false, 8 | }) 9 | export class TableSortableHeaderCellPageComponent { 10 | code = ` 11 | 12 | Enabled 13 | Enabled and ascending 14 | Enabled and descending 15 | 16 | `; 17 | } 18 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/text-area-page/textarea-ng-model-example/textarea-ng-model-example.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; 2 | import { FormFieldConfigNgModelDirective } from '../../common-doc/form-field-config-ng-model.directive'; 3 | 4 | @Component({ 5 | selector: 'pa-demo-textarea-ng-model-example', 6 | templateUrl: './textarea-ng-model-example.component.html', 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class TextareaNgModelExampleComponent extends FormFieldConfigNgModelDirective { 11 | keyupEvent?: any; 12 | enterEvent?: any; 13 | blurEvent?: any; 14 | focusEvent?: any; 15 | 16 | constructor(protected override cdr: ChangeDetectorRef) { 17 | super(cdr); 18 | } 19 | 20 | override updateConfig(config: any) { 21 | super.updateConfig(config); 22 | this.config = config; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/pastanaga-angular/src/lib/card/card.component.ts: -------------------------------------------------------------------------------- 1 | import { booleanAttribute, ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'pa-card', 5 | templateUrl: './card.component.html', 6 | styleUrls: ['./card.component.scss'], 7 | changeDetection: ChangeDetectionStrategy.OnPush, 8 | standalone: false, 9 | }) 10 | export class CardComponent { 11 | @Input({ transform: booleanAttribute }) disabled = false; 12 | 13 | @Output() cardClick: EventEmitter = new EventEmitter(); 14 | 15 | onEnter($event: Event) { 16 | this.onClick($event as KeyboardEvent); 17 | } 18 | 19 | onClick($event: MouseEvent | KeyboardEvent) { 20 | if (this.disabled) { 21 | $event.preventDefault(); 22 | $event.stopPropagation(); 23 | } else { 24 | this.cardClick.emit($event); 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /projects/demo/src/app/demo/pages/breakpoint-page/breakpoint-page.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectionStrategy } from '@angular/core'; 2 | 3 | @Component({ 4 | templateUrl: './breakpoint-page.component.html', 5 | changeDetection: ChangeDetectionStrategy.OnPush, 6 | standalone: false, 7 | }) 8 | export class BreakpointPageComponent { 9 | viewportSize = `export enum ViewportSize { 10 | small = 0, 11 | medium = 600, 12 | large = 1024, 13 | xLarge = 1440, 14 | }`; 15 | 16 | currentMode = `ngOnInit(): void { 17 | this.breakpoint.currentMode.pipe(takeUntil(this.terminator)).subscribe((mode) => { 18 | this._mode = mode; 19 | if (this._mode !== 'desktop') { 20 | this.store.dispatch(NavigationActions.hideNavigation()); 21 | } else { 22 | this.store.dispatch(NavigationActions.showNavigation()); 23 | } 24 | markForCheck(this.cdr); 25 | }); 26 | }`; 27 | } 28 | --------------------------------------------------------------------------------