fo_components 1.6.5+1

A collection of Angular components for both common and less common use cases #

Examples: https://afpatmin.github.io/fo_components/

1.6.5+1 #

  • Fixed issue where list could not be scrolled on touch devices

1.6.5 #

  • Put z-index on relative element instead of fixed - should resolve z-index issues on iOS

1.6.4 #

NumberInput #

  • Fixed issue where view didn't updated on value changes

1.6.3 #

  • Changed close button left margin to 1.5em (from 0.2em)

1.6.2 #

  • Fixed issue where touch events propagated to elements underneath the list

ImageFile #

  • Removed default label ('image')

FileUpload #

  • Decreased border width 2px -> 1px

1.6.1+1 #

TextInput, TextAreaInput #

  • Set default border color of error output to #cdd2d9;

1.6.1 #

TextInput, TextAreaInput #

  • Some minor changes to colors
  • Error output border no longer affected by color mixin

TextAreaInput #

  • Changed vertical paddding 0.5em -> 0.25em

1.6.0 #

ImageFile #

  • (BREAKING) Replaced mixin fo-image-file-border-color with fo-image-file-colors
  • Added addIcon input
  • Minor style updates

1.5.12 #

Button #

  • Changed disabled text and border colors

ImageFile #

  • Added dense attribute to upload button

1.5.11 #

TextInput #

  • Fixed issue where actionButton didn't take up full height

1.5.10 #

TextInput #

  • Made input background color white

1.5.9 #

  • Fixed issue with left positioning when parent is fixed

1.5.8 #

  • Selection now responding mousedown/touchstart instead of full click

1.5.7+6 #

  • fo-dropdown-select-icon-size no longer affect dropdown list icons, use separate mixin for that

1.5.7+4 & 1.5.7+5

  • fo-dropdown-select-icon-size mixin now also affects dropdown list icons

1.5.7+3 #

  • Added mixin fo-dropdown-select-icon-size

1.5.7+2 #

  • Removed z-index

1.5.7+1 #

TextInput #

  • Fixed broken margins on textInput from previous patch

1.5.7 #

  • Added dropdownMaxHeight input
  • Fixed a bunch of issues with z-index
  • Fixed issue where height was too large by default
  • Fixed issue where left offset was broke when fixedParent left isnt 0

TextInput #

  • Added leadingText input
  • Minor margin adjustments

1.5.6+1 #

Other #

  • Bumped grid_css to ^1.0.0

1.5.6 #

  • Removed default left/right offsets on arrow buttons
  • Fixed issue where clicking a slide sometimes triggered it to step
  • Selecting a value click event no longer propagates to elements behind

1.5.5 #

  • Added mixin fo-dropdown-select-vertical-padding
  • Minor layout tweaks
  • z-index now explicitly set to 1
  • Selected value icon is now primaryColor
  • Fixed issue where dropdown list was offset by 1
  • Category dividers are now full width

1.5.4+1 #

NumberInput #

  • Added square css directive to NumberInput

1.5.4 #

NumberInput #

  • Made add/subtract buttons wider
  • Added mixin fo-number-input-button-width
  • Added mixin fo-number-input-input-width

1.5.3 #

NumberInput #

  • Added materialIcons input
  • Fixed issue where setting text-input-padding mixin propagated into NumberInput
  • Removed default label "value"

1.5.2+1 #

  • Style tweaks

1.5.2 #

  • Added mixin fo-dropdown-border-color
  • Added maxHeight input
  • Added maxHeight input

TextInput #

  • Fixed issue where dropdown width wasn't calculated correctly when input has icons
  • Added dropdownMaxHeight input

1.5.1+2 #

TextInput #

  • Fixed issue where textColor from mixin didn't get set properly
  • Fixed issue where fo-text-input-vertical-padding wasn't applied properly

1.5.1+1 #

TextInput #

  • Replaced transparent css directive with another argument to fo-text-input-colors mixin (default: white)

1.5.1 #

TextInput #

  • (BREAKING) Updated fo-text-input-colors mixin to include alertColor
  • Added css directive 'transparent' which the input have no background color
  • Added mixin fo-text-input-vertical-padding

1.5.0 #

  • added noShadow css directive to popup

1.4.9+2 #

  • Same as 1.4.9+1 but with json_annotation

1.4.9+1 #

  • Fixed sass_builder dependency issue (moved back from devv_dependencies to dependencies)

1.4.9 #

  • Added loop input
  • (BREAKING) Replaced css directive noSlideAnimation with animateSlides input (default: true), and removed animate noFadeAnimation
  • (BREAKING) Slides are no longer animated when set externally
  • Improved category labels design

ErrorOutput #

  • Now has correct width (takes border into account)

Other #

  • Bumped some dependencies (build_runner, json_serializable)

1.4.8 #

  • Fixed issue where position wasn't set properly when anchor/target was translated
  • Added materialIcons input
  • Added nextIcon and prevIcon inputs
  • No longer using fo-button for next/prev buttons

1.4.7 #

  • Added noFadeAnimation and noSlideAnimation css directives

1.4.6 #

TextAreaInput #

  • Font size now inherited from parent rather than monospace

1.4.5 #

TextInput #

  • (BREAKING): selectionChange output now fires SelectionChangeEvent objects rather than FoDropdownOptionRenderables

1.4.4+1 #

TextInput #

  • selectionChange output now fires before the actual ngModel value is set

1.4.4 #

  • Fixed font size so that it can be set normally: fo-modal { font-size: 32px; }

TextInput #

  • Added filterOptions input (default: true)

1.4.3 #

TextInput #

  • Added showDropdownOnFocus input (default: false)

TextInput, DropdownSelect #

  • Added showDropdownCategoryLabels input (default: true)
  • Added showCategoryLabels input (default: true)
  • Made icon container smaller (1.8em -> 1.2em)

1.4.2+4 & 1.4.2+5

NumberInput #

  • Fixed trailing space issue for real this time

1.4.2+3 #

NumberInput #

  • Fixed trailing space issue

1.4.2+2 #

Button #

  • Fixed some icon alignment issues

1.4.2+1 #

  • Tweaked alignments slightly

NumberInput #

  • Fixed alignment on number input

1.4.2 #

  • Added materialIcon input for close button

1.4.1 #

  • BREAKING: Removed all *-font-size mixins. To set font-size, just do it the normal way (fo-text-input { font-size: 24px; })

1.4.0+1 #

  • Fixed some problems with inconsistency using dense attribute

1.4.0 #

  • BREAKING: Removed dropdown-select-multi-font-size mixin, now incorporated into dropdown-select-font-size
  • BREAKING: No longer relying on line-height to style, only vertical padding (1rem default, 0.5rem for dense attribute)
  • BREAKING: Changed how leading/tralining/clearIcons are aligned/sized
  • BREAKING: Replaced two mixins with single: fo-dropdown-select-colors
  • Added fo-text-input-colors mixin
  • FilterContainer now hidden completely if search attribute not set
  • Removed clearSize attribute from actionButton
  • Fixed issue where square attribute didn't propagate to actionButton
  • Now has proper cursor pointer
  • Label color now defaults to grey (use mixin to change it)

ImageFile #

  • Some adjustments to vertical alignment

1.3.8 #

Button #

  • Changed how button height and internal alignment is specifed
  • White button border color now #eed2e9

TextInput #

  • Clear icon now always visible

1.3.7+1 #

Button #

  • Changed label color when disabled from white to darkened disabled background color

1.3.7 #

  • Added placeholder input (similar to text input placeholders)
  • Added mixins fo-dropdown-select-dropdown-icon-color and fo-dropdown-select-selected-value-color
  • Label is only semi-bold if secondaryLabel is set
  • Removed small margin from top

1.3.6+1 #

TextInput #

  • Icon now affected by font-size mixin
  • Fixed issue where icon td wasn't wide enough when using mixin

1.3.6 #

  • offsetTop and offsetHorizontal are now both null by default
  • Made some style adjustments for list items

1.3.5+5 #

  • Added targetPosition and offsetHorizontal inputs

1.3.5+4 #

  • Added targetPosition input which places a target indicator at the top, use at your own risk.

1.3.5+2 #

  • Added offsetHorizontal input which offsets the dropdown position horizontally

1.3.5+1 #

  • Should now respect viewport constraints even with fixed parent

1.3.5 #

Button #

  • Text overflow is now ellipsis
  • Now handles offsetTop properly when parent is fixed

1.3.4 #

  • Output container no longer showing when no values are selected

Icon #

  • Made icon align-center internally

1.3.3+1 #

Component updates #

Icon #

  • Removed tiny bottom margin

1.3.3 #

Component updates #

  • Step buttons are now hidden on small screen, and replaced by swipe gesture
  • Increased step button size and added fade when they are not hovered

1.3.2 #

Bugfixes #

TextInput #

  • Fixed issue where leading- and trailingIcons didnt align properly

Quiz #

  • Increased quiz option highlight brightness

1.3.1 #

Button #

  • Now properly highlights selected button
  • Set hover brightness to 120% (down from 150%)
  • Hovering a white button no longer increases its brightness
  • Added mixin 'fo-button-vertical-padding'

DataTable #

  • Fixed issue where icon sizes was too large

1.3.0 #

General #

  • BREAKNIG: Updated angular dependency to 6.0.0-alpha and angular_components to 0.14.0-alpha

Component updates #

Button #

  • BREAKING: Removed backgroundColorHover argument from fo-button-colors mixin

DataTable #

  • Row selector no longer truncates numbers > 100
  • Fixed icon sizing
  • Selected value icon now primaryColor
  • Header/Footer now hidden unless populated
  • Added buttonColor and buttonBackgroundColor inputs

Quiz #

  • Made more pretty
  • Added buttonColor

1.2.4 #

Component updates #

  • Options implementing renderIcon now renders icon in selectedValue aswell as in dropdown

ImageFile & FileUpload

  • Dashed border now greyColorBright by default (instead of greyColor)

FoLabel #

  • Added maxWidth 100%

1.2.3+1 #

Component updates #

  • From now on only emit selectedIdsChange when change is internal

1.2.3 #

Component updates #

ImageFile #

  • Added placeholder input

ImageFile, FileUpload #

  • Dashed border now 2px wide (up from 1px)
  • No longer emitting selectedIdsChange onInit

1.2.2 #

Component updates #

Notification, Panel #

  • Minor tweaks to icon sizes

ImageFile #

  • Added fo-image-file-min-height mixin

Bugfixes #

ImageMap #

  • Fixed issue where not all marked zones was alert-color

1.2.1 #

Component updates #

Button, Dropdown, DropdownList, DropdownSelect, DropdownSelectMulti, TextAreaInput, TextInput #

  • Added css directive 'square' which will remove rounded corners
  • Added css directive 'noFocusShadow' to not highlight on focus

NumberInput #

  • Removed focus highlight shadow

1.2.0 #

Component updates #

Button #

  • Added leadingIcon and trailingIcon
  • Added some left margin to icon

FileUpload, ImageFile #

  • User can now specify whether or not to use material icons (default: true)

Other #

  • Added example folder with link to examples

1.1.6 #

Component updates #

DataTable #

  • Confirm delete buttons are no longer dense and has all borders
  • Added ability to renders optional leading image
  • Made secondaryLabel slightly smaller (0.9em)
  • Added fo-modal-padding mixin

TextInput #

  • Clear icon can now be specified whether or not is material
  • Outputs an event when clear icon is clicked

1.1.5 #

Component updates #

  • Added top and bottom css directives to Carousel

Bugfixes #

  • Fixed DropdownSelect action button size when using dropdown-select-font-size mixin
  • Dropdown is now properly positioned when it has a fixed parent

1.1.4 #

Bugfixes #

  • Fixed issue where number input added two units on each touch event

Component updates #

  • added css directive bottomNavigationOnSmall
  • Increased dropdown icon size when using fo-dropdown-font-size mixin
  • Added fo-modal-font-size mixin

1.1.3+1 #

Bugfixes #

DataTable #

  • Fixed broken material icons
  • Rowcount selector now has fixed width to make sure the dropdown is always wide enough

1.1.3 #

Component updates #

  • Added short delay to prevent dropdown to immediately auto-close when spawned by click event
  • Added anchorRight input
  • constrainToViewPort now takes document scrollbars into account
  • Scroll and resize subscriptions now properly cancelled onDestroy

1.1.2+2 #

Bugfixes #

  • Updated SDK constraints in pubspec.yaml
  • Fixed style issue in DataTable modal (when deleting a resource)
  • FoDropDown constrainToViewPort now constraints top aswell as bottom

1.1.2+1 #

Bugfixes #

  • Updated SDK constraints in pubspec.yaml

Component updates #

  • Added fo-label-color mixin
  • Added fo-tab-panel-colors mixin

1.1.2 #

Bugfixes #

  • Fixed issue where dropdown sometimes crashed due to internal error

Component updates #

  • Added [offsetTop] input to DropdownList

1.1.1 #

Component updates #

  • Extracted dropdown logic from DropdownList into separate DropdownComponent

Bugfixes #

  • Modal component overlay now has proper z-index
  • Fixed issue with broken size input on single-color Icons
  • DropdownList mixin now properly resizes option icon container

1.1.0+1 #

Component updates #

  • Icon no longer requires colorCount input to support colors (instead all icons has support for 16 colors)

1.1.0 #

Bugfixes #

  • Now exporting CarouselSlide

Component updates #

Panel #

  • Button style now only applied to close button

Icon #

  • Now supports multiple colors using input colorCount
  • No longer using MaterialModal under the hood
  • Breaking: Renamed input 'title' to 'header'
  • Breaking: Replaced 'fixedWidth' and 'fixedHeight' inputs with pure-css attributes 'fullWidth' and 'fullHeight'
  • Breaking: Replaced 'largePadding' input with pure css attribute 'dense'

1.0.5 #

Component updates #

Notification #

  • FoButton style now only applied to close button

Icon #

  • Added boolean input [material]. If set to true, FoIcon will become a proxy to MaterialIcon (defaults to false)
  • Added boolean input [materialIcons]. If set to false, rendered icons are FoIcons (defaults to true)

Bugfixes #

  • TextAreaInput now has proper border color when input isn't valid

1.0.4 #

General #

  • Replaced ngOnChanges with interal logic due to it becomign deprecated in angular
  • Removed instances of changeDetectionStrategy. Stateful

Component updates #

  • Slight style adjustments to Next/Previous buttons
  • Removed crazy workaround to set selectedId on init

1.0.3+4 #

Component updates #

TextAreaInput #

  • Added inputElement ref

1.0.3+1 #

Component updates #

TextInput #

  • Added inputElement ref

1.0.3 #

Bugfixes #

  • TextInput with options no longer showing options if a value is set initially
  • TextInput now properly updates view when value is changed externally
  • TextInput no longer crashes when autofilled
  • DataTable table now has z-index so that batchOperation is shown under

Component updates #

TextInput, DropdownSelect, DropdownMultiSelect, DropdownList #

  • Added constrainToViewPort input

1.0.2+1 #

Bugfixes #

  • DropdownSelect now initializes properly with selectedId

1.0.2 #

General #

  • Theme now changes material-toggle color

Component Updates #

Button #

  • Decreased icon size for [dense]

DataTable #

  • Removed focus shadow from filter text input
  • Null check for options on click
  • selectedId no longer always resets to null on init
  • null option is now hidden if filterstring isn't empty

ImageMap #

  • Fixed issue where zones wasnt scaled properly with image

TextInput #

  • Got type attribute
  • Added datePickerBindings to providers (needed by autofocus)
  • ActionButton now disabled if value is empty
  • ActionButton now triggered on enter

1.0.1+1 #

Bugfixes #

  • Fixed issue where FoDropdownSelectMulti generics sometimes didn't work properly

1.0.1 #

General #

  • Added FoTextAreaInput example in docs

Component Updates #

FoDropdownSelectMulti #

  • Added support for generics (selectedIds can now have any type)

1.0.0 #

General #

  • Everything public is now properly exported in lib/fo_components.dart
  • Bumped dart sdk constraints '>=2.2.0 <3.0.0' (previously '>=2.0.0 <3.0.0')

Component Updates #

FoDropdownSelect & FoDropdownSelectMulti

  • Added optional search filter ([showSearch]="true")

Removed #

  • FoYoutubePlayer

Bugfixes #

  • FoDropdownSelectMulti selectedIds didn't get reflected properly when updated from elsewhere

0.2.2+3 #

Component updates #

FoDropdownList, FoDropdownSelect, FoDropdownSelectMulti, FoTextInput #

  • Now using abstract class FoDropdownOptionRenderable instead of FoDropdownOption

0.2.2+2 #

Component Updates #

FoDropdownSelect #

  • Added [allowNullSelection] option
  • Adjusted option category margins

0.2.2+1 #

General #

  • Added a docs start page
  • Improved docs layout

Bugfixes #

  • Fixed an issue where grid_css wasn't imported properly in some cases
  • FoImageMapZone zone origins are now properly reset after draws

0.2.2 #

General #

  • Added documentation for FoFileUpload, FoIcon, FoImageFile, FoImageMap, FoTabPanel FoModal, FoNotification, FoNumberInput, FoPanel, FoQuiz, and FoRating
  • Added dense attribute example for FoTextInput
  • Removed deprecated components FoSelect, FoMultiSelect, FoMultiInput, FoYoutubeComponent
  • Added disabled checkbox to affected components in docs
  • Improved navigation in docs

New Components #

  • FoDropdownSelectMultiComponent

Component Updates #

  • FoTabPanel now colored according to theme primary color
  • FoFileUpload, FoImageFile, FoImageMap, FoModal, FoNotification, FoNumberInput, FoPanel, FoQuiz, FoRating now has in-house components instead of material ones

Bugfixes #

  • FoTextInput font-size mixins now applies to action button aswell

0.2.1 #

General #

  • Added example/ to .gitignore

Component Updates #

  • Added FoDropdownSelect disabled input
  • Replaced material components in FoDataTableComponent with in-house components
  • Better dense directive for button, dropdownselect and textinput
  • Added actionButton logic to dropdownselect

Other #

  • Removed value field from FoDropdownOption

0.2.0 #

General #

  • Added example/ and docs/ folders (docs/ is published on github pages)
  • Added CHANGELOG.md
  • Removed FoProviders
  • Improved package description
  • Replaced github dependencies with pub ones
  • Removed fo_model dependency

New Components #

  • MaterialTextInput
  • MaterialDropdownSelect

Deprecated Components #

  • FoMultiSelectComponent
  • FoMultiInputComponent
  • FoSelectComponent
  • FoTimeInputComponent

Removed Components #

  • FoTimeInputComponent

example/README.md

Getting started #

Examples: https://afpatmin.github.io/fo_components/

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  fo_components: ^1.6.5+1

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:fo_components/fo_components.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
71
Health:
Code health derived from static analysis. [more]
87
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
79
Learn more about scoring.

We analyzed this package on Sep 20, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.0
  • pana: 0.12.21

Platforms

Detected platforms: web

Primary library: package:fo_components/fo_components.dart with components: html, js.

Health suggestions

Fix lib/validators/fo_validators.dart. (-7.24 points)

Analysis of lib/validators/fo_validators.dart reported 15 hints, including:

line 15 col 7: DO use curly braces for all flow control structures.

line 28 col 7: DO use curly braces for all flow control structures.

line 42 col 7: DO use curly braces for all flow control structures.

line 56 col 7: DO use curly braces for all flow control structures.

line 68 col 7: DO use curly braces for all flow control structures.

Fix lib/components/fo_data_table/fo_data_table_component.dart. (-3.45 points)

Analysis of lib/components/fo_data_table/fo_data_table_component.dart reported 7 hints, including:

line 213 col 7: DO use curly braces for all flow control structures.

line 217 col 7: DO use curly braces for all flow control structures.

line 260 col 7: DO use curly braces for all flow control structures.

line 355 col 7: DO use curly braces for all flow control structures.

line 357 col 7: DO use curly braces for all flow control structures.

Fix lib/components/fo_image_file/fo_image_file_component.dart. (-1.99 points)

Analysis of lib/components/fo_image_file/fo_image_file_component.dart reported 4 hints:

line 183 col 15: DO use curly braces for all flow control structures.

line 255 col 11: DO use curly braces for all flow control structures.

line 278 col 7: DO use curly braces for all flow control structures.

line 280 col 7: DO use curly braces for all flow control structures.

Fix lib/components/fo_number_input/fo_number_input_component.dart. (-1 points)

Analysis of lib/components/fo_number_input/fo_number_input_component.dart reported 2 hints:

line 143 col 13: DO use curly braces for all flow control structures.

line 203 col 7: DO use curly braces for all flow control structures.

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (intl).

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.0 <3.0.0
angular ^6.0.0-alpha 6.0.0-alpha+1
angular_components ^0.14.0-alpha 0.14.0-alpha+1
angular_forms ^2.1.3 2.1.4
collection ^1.14.11 1.14.12
grid_css ^1.0.0 1.0.0
intl ^0.15.8 0.15.8 0.16.0
json_annotation ^3.0.0 3.0.0
sass_builder ^2.1.3 2.1.3
Transitive dependencies
analyzer 0.37.1+1 0.38.3
angular_ast 0.5.11
angular_compiler 0.4.5
args 1.5.2
async 2.3.0
build 1.2.0
build_config 0.4.1+1
built_collection 4.2.2
built_value 6.7.1
charcode 1.1.2
checked_yaml 1.0.2
cli_repl 0.2.0+1
code_builder 3.2.0
convert 2.1.1
crypto 2.1.3
csslib 0.16.1
dart_internal 0.1.7
dart_style 1.2.10
fixnum 0.10.9
front_end 0.1.21+1 0.1.25
glob 1.1.7
html 0.14.0+2
http 0.12.0+2
http_parser 3.1.3
js 0.6.1+1
kernel 0.3.21+1 0.3.25
logging 0.11.3+2
matcher 0.12.5
meta 1.1.7
observable 0.22.2
package_config 1.1.0
package_resolver 1.0.10
path 1.6.4
pedantic 1.8.0+1
protobuf 0.13.16+1 0.14.3
pub_semver 1.4.2
pubspec_parse 0.1.5
quiver 2.0.5
sass 1.22.12 1.23.0-module.beta.1
source_gen 0.9.4+4
source_maps 0.10.8
source_span 1.5.5
stack_trace 1.9.3
stream_transform 0.0.19
string_scanner 1.0.5
term_glyph 1.1.0
tuple 1.0.2
typed_data 1.1.6
watcher 0.9.7+12
yaml 2.2.0
Dev dependencies
build_runner ^1.6.7
json_serializable ^3.2.2