Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@guillotinaweb/pastanaga-angular
Advanced tools
Provides Pastanaga UI elements as Angular components
Pastanaga Angular is an Angular implementation of Pastanaga design system offering a set of re-usable UI components which are covering typical needs of any web application. It is maintained by Plone and Guillotina communities. It aims to remain simple, and pays particular attention to:
See https://plone.github.io/pastanaga-angular for usage examples and developer guide.
You can install Pastanaga-angular using its npm package:
npm install @guillotinaweb/pastanaga-angular
yarn add @guillotinaweb/pastanaga-angular
But if you want to build your own demo application using pastanaga demo components, you need to install it using mrs-developer:
mrs-developer
if you don't already have it:yarn add mrs-developer
mrs.developer.json
configuration (you can choose a specific tag as below, or a branch):{
"pastanaga-angular": {
"url": "git@github.com:plone/pastanaga-angular.git",
"https": "https://github.com/plone/pastanaga-angular.git",
"path": "/projects/pastanaga-angular/src",
"package": "@guillotinaweb/pastanaga-angular",
"tag": "2.52.1"
}
}
missdev
:missdev
Note:
By default, missdev
will install the dependencies in src/dev
folder.
If you're in a workspace with a mono-repository structure (using nx for instance), then you probably want to install pastanaga-angular in your libs
folder.
You can do so by using missdev --output
option:
missdev --output=../libs
Pastanaga-angular requires two files (pastanaga-core-overrides.scss
and pastanaga-component-overrides.scss
) to be in the src
folder of any project using it.
In order for those files to be found during the compilation, you have to add src
folder in style preprocessing options of angular.json
:
"stylePreprocessorOptions": {
"includePaths": [
"src"
]
}
Pastanaga-angular is using Poppins fonts and Quanta glyphs.
If you want to use the same fonts and glyphs sprite, declare Pastanaga assets in angular.json
:
{
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@guillotinaweb/pastanaga-angular/assets",
"output": "assets"
}
]
}
{
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./src/develop/pastanaga-angular/projects/pastanaga-angular/assets",
"output": "assets"
}
]
}
Import Pastanaga core style in your application style (usually src/styles.scss
):
@import "~@guillotinaweb/pastanaga-angular/lib/styles/core";
@import "./develop/pastanaga-angular/projects/pastanaga-angular/lib/styles/core";
If you want to use Pastanaga fonts in your application, you need to
$font-path
in your application style:$font-path: '../../../assets/fonts';
Warning: since angular 10, scss variable is now relative to the place it is called.
@import "~@guillotinaweb/pastanaga-angular/lib/styles/fonts";
mrs-developer
@import "./develop/pastanaga-angular/projects/pastanaga-angular/lib/styles/fonts";
Any project using pastanaga-angular must have two files (pastanaga-core-overrides.scss
and pastanaga-component-overrides.scss
) in their src
folder.
Keep those file empty if you want to use Pastanaga theme.
If you have your own theme, you can override pastanaga theme by overriding the tokens in these two files:
pastanaga-core-overrides.scss
allows to override variables from:
pastanaga-component-overrides.scss
allows to override variables from all other theming files like:
Pastanaga theme is defined in src/lib/styles/theme
folder. Any variable with !default
suffix can be overwritten.
Pastanaga theme is built around token. For example, _palette.token.scss
contains all the colors used in Pastanaga with general token names (e.g. $color-neutral-regular
, $color-primary-stronger
).
See the full list in https://plone.github.io/pastanaga-angular/palette.
Then, some components have a second layer of tokens. For example buttons have a list of tokens for each aspect and kind (e.g. $color-text-button-primary-solid
, $color-background-button-primary-solid
,…).
So you can have your own theme by overwriting the whole color palette or just by changing some aspects of some components.
In Pastanaga 2+, we prefix all modules with Pa
: ButtonModule
becomes PaButtonModule
.
Pastanaga now contains some useful types for properties configuring several components:
Kind
: primary | secondary | destructive | invertedSize
: tee-shirt size going from small
to xxlarge
. Not all sizes are available for all componentsWe changed the way to configure buttons:
color
is now managed by kind
propertysize
is now expecting to be one of the values of Size
typeborder
property is replaced by aspect
which can be solid
or basic
See https://plone.github.io/pastanaga-angular/button for full documentation.
pa-icon
is now using a svg sprites to display icons by name. You can still provide a full path to display any other image though.
See https://plone.github.io/pastanaga-angular/icon for full documentation.
We changed form elements hierarchy: now they are all in the same place under controls
folder.
They still belong to two distinct modules (PaTextFieldModule
and PaTogglesModule
).
All controls are sharing some properties:
PaFormControlDirective
is the base class containing common properties (like id
, name
, disabled
…) for all form elements componentsNativeTextFieldDirective
is extending PaFormControlDirective
and contains common properties for all text field elements (like placeholder
, value
, readonly
,…)FAQs
Provides Pastanaga UI elements as Angular components
The npm package @guillotinaweb/pastanaga-angular receives a total of 60 weekly downloads. As such, @guillotinaweb/pastanaga-angular popularity was classified as not popular.
We found that @guillotinaweb/pastanaga-angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.