Alfresco Angular Components

Overview

Alfresco Application Development Framework (ADF)

branch status
master Build Status
develop Build Status

Codacy Badge Join the chat at https://gitter.im/Alfresco/alfresco-ng2-components

license

Introduction

See the Introduction page to get started with the Alfresco Application Development Framework.

Prerequisites

Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration. see the prerequisites section in creating your first ADF Application for full details.

Components

You can find the sources for all ADF components in the lib folder.

Full documentation for all components is available at the ADF Component Catalog.

Libraries

ADF Libraries list:

Demo Application

A separate application showcasing integration of components can be found here. The app has examples of basic interaction for both APS and ACS components.

Yeoman generators

To speed up the development of your ADF application, use the Yeoman Generator. This will create a full working project with all the right libraries and tools.

yeoman logo

Browser Support

All components are supported in the following browsers:

Browser Version
Chrome Latest
Safari (OS X) 9.x
Firefox* Latest
Edge 13, 14
Internet Explorer 11
  • Due to a known issue in Firefox, the Alfresco Upload Component does not currently support folder upload functionality on Firefox.

See the Browser Support article for more details.

Comments
  • Custom stencil seems broken in 3.8

    Custom stencil seems broken in 3.8

    Type of issue: (check with "[x]")

    • [ ] New feature request
    • [X ] Bug
    • [ ] Support request
    • [ ] Documentation

    Current behaviour: Custom stencil that works with 3.6 and 3.7 does not load with 3.8

    Expected behavior: Custom stencil should load in the form of a search button.

    Steps to reproduce the issue: Upgrade to 3.8, create a new process.

    Component name and version: process-services/lib/form/form.component.ts - 3.8

      constructor(
     ...
        private formRenderingService: FormRenderingService
      ) {
          formRenderingService.setComponentTypeResolver('crm_search_primary', () => SearchConstituentButtonComponent, true);
       }
    

    Our code matches the examples: from demo-shell and from the yo generator. Once upgrading to 3.8 we get an error message in the form instead of the search button: Unknown type: crm_search_primary

    UPDATE: I commented out the providers block in process-services/lib/form/form.component.ts and the problem goes away.

    @Component({
        selector: 'adf-form',
        templateUrl: './form.component.html',
        encapsulation: ViewEncapsulation.None,
        providers: [
            { provide: FormRenderingService, useClass: ProcessFormRenderingService }
        ]
    })
    
    bug 
    opened by uclaeamsavino 19
  • Translation not working in sharedModule or more than one module

    Translation not working in sharedModule or more than one module

    Translation is working if project contains only one module(appModule).I am having more than one module.In my SharedModule, translation is not working.i am getting the following error.

    Template parse errors:
    The pipe 'translate' could not be found ("
          </td>
          <td>
              <i class="material-icons" md[ERROR ->]-tooltip="{{'BUTTON_LABEL.ADVANCE'  | translate}}"
                 mdTooltipPosition="left"): ng:///SharedModule/SharedSearchComponent.html@9:70
    
    bug 
    opened by dhrn 19
  • [ADF-2562] Download a previous version

    [ADF-2562] Download a previous version

    Please check if the PR fulfills these requirements

    • [x] The commit message follows our guidelines
    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    What kind of change does this PR introduce? (check one with "x")

    • [ ] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation
    • [x] Other... Please describe: Further improvement on file versioning. Please see https://issues.alfresco.com/jira/browse/ADF-2562

    What is the current behaviour? (You can also link to an open issue here)

    What is the new behaviour?

    Does this PR introduce a breaking change? (check one with "x")

    • [ ] Yes
    • [x] No

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information:

    opened by suzanadirla 17
  • An amount field in APS 1.9 form with a

    An amount field in APS 1.9 form with a "£" currency symbol is rendered as "$" in ADF

    Type of issue: (check with "[x]")

    • [ ] New feature request
    • [X ] Bug
    • [ ] Support request
    • [ ] Documentation

    Current behaviour: An amount field in an APS form with "£" set as currency gets rendered as "$" when implemented in ADF app.

    Expected behavior: The amount field should display the currency as "£" as set in APS

    Steps to reproduce the issue: Configure a form with amount field and change the the currency to "£" and check the difference in Activiti-app and ADF app.

    Component name and version: ng2-form

    Browser and version: Chrome, Firefox, Microsoft edge

    Node version (for build issues):

    New feature request:

    Investigation 
    opened by sharmap-pt 15
  • Sign in box

    Sign in box

    • [x] The size of the 'Sign in' box should be 450x450px.
    • [x] The current build has an interaction not in the current design. In the put feels - The placeholder text transitions into a label on selection. Remove this transition to reflect the design.
    • [x] Sometimes we have noticed both input field highlighted orange at the same time.
    • [x] The copyright information is missing at the bottom of the box.
    • [x] The password icon is currently in the wrong order. eye with line = hidden
    • [x] There's currently a shadow around the orange sign in button. This needs to be removed to match the design.
    • [x] 'NEED HELP' & 'REGISTER' is underlined. The underline needs to be removed to match the design.
    • [x] Font colour needs to be 87 transparency once the live text is being entered - to match the design. 'Remember' also needs to be 87
    • [x] The 'Remember' checkbox needs to be preselected.
    • [x] Once the user successfully enters his details and clicks 'sign in', the design shows the 'sign in' button transition into a 'welcome button'. Please match the design.
    • [x] The inactive 'sign in' button is currently different to the design. The text colour and also the grey box itself needs to match the design.
    • [ ] The red colours for the error states need to match the red in the design.
    • [x] Warning icon is missing when the top level errors are presented. e.g.. '…invalid username and password'
    Style/UX 
    opened by heenav 15
  • ADF 4.2.0 app is reloading infinite times

    ADF 4.2.0 app is reloading infinite times

    Type of issue: (check with "[x]")

    • [ ] New feature request
    • [x] Bug "[x]"
    • [ ] Support request
    • [ ] Documentation

    Current behaviour:

    After starting a fresh ADF 4.2.0, the app is just reloading infinite times in browser. Expected behavior:

    The login page should reload Steps to reproduce the issue:

    Create a fresh app using ADF 4.2.0 and start the app. Component name and version:

    Browser and version:

    Chrome Node version (for build issues):

    node 14.x New feature request:

    opened by groul 14
  • [#4961] Angular v9 (ivy) compatibility fixes

    [#4961] Angular v9 (ivy) compatibility fixes

    Please check if the PR fulfills these requirements

    • [x] The commit message follows our guidelines
    • ~~[ ] Tests for the changes have been added (for bug fixes / features)~~
    • ~~[ ] Docs have been added / updated (for bug fixes / features)~~

    What kind of change does this PR introduce? (check one with "x")

    • [x] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, local variables)
    • [x] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation
    • [ ] Other... Please describe:

    What is the current behaviour? (You can also link to an open issue here)

    The library contains code that is not compatible with Angular v8 and v9.

    What is the new behaviour?

    The incompatible code has been migrated to be compatible with Angular v9. In particular it should also work with ivy enabled applications.

    Does this PR introduce a breaking change? (check one with "x")

    • [ ] Yes
    • [x] No

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information:

    Fixes #4961

    opened by petebacondarwin 13
  • Custom Outcome buttons on a

    Custom Outcome buttons on a "Start" form are not displayed in activiti-start-form component

    Type of issue: (check with "[x]")

    - [ ] New feature request
    - [ x] Bug  
    - [ ] Support request
    - [ ] Documentation
    

    Current behaviour: Custom Outcome buttons on a "Start" form are not displayed in activiti-start-form component. I tried setting [showOutcomeButtons]="true", however no luck! It just shows the submit button

    Expected behavior: Expecting the custom outcomes to be displayed on a start form

    Steps to reproduce the issue: My html where I noticed this issue looks like

    <activiti-start-form [processDefinitionId]="processDefinitionId" [showRefreshButton]="false" [showOutcomeButtons]="true" (outcomeClick)="onOutcomeClick($event)">

    Component name and version: ng2-activiti-form 1.2

    Browser and version: Chrome

    documentation 📄 
    opened by cijujoseph 13
  • [ADF-4227] Sidenav Layout - support direction

    [ADF-4227] Sidenav Layout - support direction

    Please check if the PR fulfills these requirements

    • [ ] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    What kind of change does this PR introduce? (check one with "x")

    • [ ] Bugfix
    • [x] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation
    • [ ] Other... Please describe:

    What is the current behaviour? (You can also link to an open issue here)

    What is the new behaviour?

    preview

    Does this PR introduce a breaking change? (check one with "x")

    • [ ] Yes
    • [x] No

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information:

    Failing tests 
    opened by pionnegru 11
  • Custom theming issue in 2.0

    Custom theming issue in 2.0

    Type of issue: (check with "[x]")

    • [ ] New feature request
    • [x] Bug
    • [x] Support request
    • [ ] Documentation

    Current behaviour:

    After Migration to 2.0 i am getting Custom theming error i am having theming option for my app.so i have added one script file in project. Script will take all custom defined theme's(scss) and convert it into corresponding css. In Adf 2.0 i am not able to produce custom theme. I found node-sass not able to importthis Assume my one one of custom theme: Dark-theme.scss @import '../node_modules/@alfresco/adf-content-services/styles/index'; @import '../node_modules/@alfresco/adf-process-services/styles/index'; @import '../node_modules/@alfresco/adf-insights/styles/index'; @import '../node_modules/@alfresco/adf-core/styles/index' @import './app/app-theme'; @include mat-core($typography); // Define the dark theme. $primary: mat-palette($mat-pink); $accent: mat-palette($mat-blue-grey, A200, A100, A400); $theme: mat-dark-theme($primary, $accent); ap-theme($theme) { @include angular-material-theme($theme); @include adf-content-services-theme($theme); @include adf-process-services-theme($theme); @include adf-insights-theme($theme); @include adf-core-theme($theme); @include app-theme($theme); } Script Logic: all scss(themes) > css file i run the script with ng serve and ng build .

    Expected behavior:

    Steps to reproduce the issue:

    In 1.9 theming this line is not available

    Component name and version:

    Browser and version:

    Node version (for build issues):

    Node: 8.9.1 npm: 5.5.1 Angular-Cli: 1.5.2 Adf: 2.0 New feature request:

    Help wanted 
    opened by dhrn 11
  • Preview of documents attached APS process does not work

    Preview of documents attached APS process does not work

    Type of issue: (check with "[x]")

    • [ ] New feature request
    • [x] Bug
    • [ ] Support request
    • [ ] Documentation

    Current behaviour: I am using ADF 3.4 version. When I try to open any task of APS which has document (word document) attached, in ADF I see document with option to "view" the document. When I click on view it calls "rendition" API of APS. but in Rendition Type ADF is not passing correct value, so API call is failing.

    I tried with demo-shell app as well and I am seeing same issue. below is the URL that gets generated activiti-app/api/enterprise/content/115132/rendition/%7BrenditionType%7D in this URL it should pass preview instead of %7BrenditionType%7D. If i change it to preview and open url in browser I am able to preview the document.

    Expected behavior: ADF should pass renditionType as "preview" and load the document preview

    Steps to reproduce the issue:

    • start an APS process with word document attached and assign a task to user.
    • Open the task from ADF, on document attached process click on "show" action to preview the document.

    Component name and version:

    • adf-viewer
    • ADF version 3.4

    Browser and version: Chrome

    Node version (for build issues):
    Node 8.16.1

    New feature request:

    bug Investigation 
    opened by alfsender 10
  • AAE11817 bugfix on gh action - travis port envvar

    AAE11817 bugfix on gh action - travis port envvar

    Please check if the PR fulfills these requirements

    • [ ] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    What kind of change does this PR introduce? (check one with "x")

    • [ ] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation
    • [ ] Other... Please describe:

    What is the current behaviour? (You can also link to an open issue here)

    What is the new behaviour?

    Does this PR introduce a breaking change? (check one with "x")

    • [ ] Yes
    • [ ] No

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information:

    PR: draft 
    opened by ozeta 0
  • [#7902] Fix to enable cmaps with pdfjs

    [#7902] Fix to enable cmaps with pdfjs

    pdfjs works fine with Japanese characters with this options.

    Please check if the PR fulfills these requirements

    • [x] The commit message follows our guidelines
    • [x] Tests for the changes have been added (for bug fixes / features)
    • [x] Docs have been added / updated (for bug fixes / features)

    What kind of change does this PR introduce? (check one with "x")

    • [ ] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation
    • [ ] Other... Please describe:

    What is the current behaviour? (You can also link to an open issue here) Browser does not load cmaps files correctly with pdfjs.

    What is the new behaviour? Browser loads cmaps files with pdfjs.

    Does this PR introduce a breaking change? (check one with "x")

    • [ ] Yes
    • [ ] No

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information:

    PR: partially-approved 
    opened by eromano 0
  • AAE-11910 - setup cron pipe to trigger alpha_adf and add a workflow_dispatch to execute manually adf tests

    AAE-11910 - setup cron pipe to trigger alpha_adf and add a workflow_dispatch to execute manually adf tests

    Please check if the PR fulfills these requirements

    • [ ] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    What kind of change does this PR introduce? (check one with "x")

    • [ ] Bugfix
    • [x] Feature
    • [x] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation
    • [ ] Other... Please describe:

    What is the current behaviour? (You can also link to an open issue here)

    What is the new behaviour?

    task: https://alfresco.atlassian.net/browse/AAE-11910

    Does this PR introduce a breaking change? (check one with "x")

    • [ ] Yes
    • [ ] No

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information:

    PR: unreviewed 
    opened by maurizio-cacace 0
  • AAE-11810 added conditional class to indicate validation error

    AAE-11810 added conditional class to indicate validation error

    Please check if the PR fulfills these requirements

    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    What kind of change does this PR introduce? (check one with "x")

    • [ ] Bugfix
    • [x] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation
    • [ ] Other... Please describe:

    What is the current behaviour? (You can also link to an open issue here) https://alfresco.atlassian.net/browse/AAE-11810

    What is the new behaviour? Added conditional class to mat-form-field indicating validation error in input. It is needed to properly style all inputs in studio-hxp.

    Does this PR introduce a breaking change? (check one with "x")

    • [ ] Yes
    • [x] No

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information:

    PR: partially-approved 
    opened by tomaszhanaj 0
  • [ACA-4647] duplication key error in a snackbar not shown

    [ACA-4647] duplication key error in a snackbar not shown

    Please check if the PR fulfills these requirements

    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes / features)
    • [ ] Docs have been added / updated (for bug fixes / features)

    What kind of change does this PR introduce? (check one with "x")

    • [x] Bugfix
    • [ ] Feature
    • [ ] Code style update (formatting, local variables)
    • [ ] Refactoring (no functional changes, no api changes)
    • [ ] Build related changes
    • [ ] Documentation
    • [ ] Other... Please describe:

    What is the current behaviour? (You can also link to an open issue here) https://alfresco.atlassian.net/browse/ACA-4647

    What is the new behaviour? Now variables in payload are set properly so response from backend is correct now.

    Does this PR introduce a breaking change? (check one with "x")

    • [ ] Yes
    • [x] No

    If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...

    Other information: APPS PR: https://github.com/Alfresco/alfresco-apps/pull/4704

    PR: draft 
    opened by AleksanderSklorz 0
Releases(6.0.0-A.1)
Set of react components based on styled-components

React to styled Links Documentation Contributing Ask question or give feedback Packages @react-to-styled/components – all components in one package @r

null 11 Jan 1, 2023
A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

React Pluto Component Design System + UI Kit A package of small but beautiful React components from the planet Pluto. To install the latest version, r

Yash Sehgal 17 Aug 8, 2022
Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Google 32.1k Jan 4, 2023
Modular and customizable Material Design UI components for the web

Material Components for the web Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX

Material Components 16.6k Jan 3, 2023
[ON HOLD] Living Style Guides Engine and Maintenance Environment for Front-end Components. Core repository.

[ON HOLD] SourceJS - Living Style Guide Platform The project been stale for a while and currently is in the [ON HOLD] state until we find new maintain

SourceJS 552 Nov 8, 2022
A built-time CSS library for styling React components.

Stylin Stylin is a build-time CSS library that offers an elegant way to style React components. It extends CSS Modules and adds some missing features

Sultan 173 Dec 30, 2022
Startup Landing Page Components for React.js

neal-react neal-react is a collection of reactjs components to quickly build landing pages. I found that using hosted services like Launchrock doesn't

Denny Britz 1.4k Nov 30, 2022
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Astrit Malsija 8.9k Jan 2, 2023
Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Sam4Sc - a migration assistant for Angular to SCAM (Single Angular Component Modules) and Standalone Components

Rainer Hahnekamp 7 Nov 16, 2022
Angular Library workspace to creating and testing angular libraries

Library Workspace Run Locally Clone the project https://github.com/sametcelikbicak/library-workspace.git Go to the library project directory cd li

Samet ÇELİKBIÇAK 4 Nov 1, 2022
Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Getting Started Clarity Angular is published as two npm packages: Contains the static styles for building HTML components. Contains the Angular compon

VMware Clarity 145 Dec 29, 2022
Firebase Storage with Angular 14 example: Upload File, Retrieve, Display, Download Url & Delete using @angular/fire AngularFireStorage

Angular 14 File Upload to Firebase Storage example I will show you how to make Angular 14 Firebase Storage: File Upload/Display/Delete Application usi

null 7 Sep 7, 2022
An example application that uses file-based routing with Angular, Analog, Vite with the Angular Router

Angular, Vite, and File-based routes This is an example application that uses Angular, Analog, and Vite for file-based routing. Routes are places in t

Brandon 9 Sep 25, 2022
Angular JWT refresh token with Interceptor, handle token expiration in Angular 14 - Refresh token before expiration example

Angular 14 JWT Refresh Token example with Http Interceptor Implementing Angular 14 Refresh Token before Expiration with Http Interceptor and JWT. You

null 8 Nov 30, 2022
Matteo Bruni 4.7k Jan 4, 2023
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023
Matteo Bruni 4.7k Jan 4, 2023
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023